Tailwind CSS Code

Code mockup is used to show a block of code in a box that looks like a code editor.

Class Name	Type	Description
mockup-code	Component	Container element.

The mockup-code class is tailored to enhance the presentation of your code with a stylish layout. Use data-prefix to incorporate additional prefixes before text, such as $, >, or numeric indicators.

Multi line

Code spanning multiple lines.

<div class="mockup-code">
  <pre data-prefix="$"><code>npm i -D flyonui@latest</code></pre>
  <pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
  <pre data-prefix=">" class="text-success"><code>Done!</code></pre>
</div>

Highlighted line

Code example that highlights syntax.

<div class="mockup-code">
  <pre data-prefix="1"><code>npm i -D flyonui@latest</code></pre>
  <pre data-prefix="2"><code>installing...</code></pre>
  <pre data-prefix="3" class="bg-warning text-warning-content"><code>Warning!</code></pre>
</div>