mockups
Tailwind CSS Code
A code mockup displays code inside a styled box that mimics a code editor, making it perfect for showcasing code in documentation, demos, or tutorials.
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.
npm i -D flyonui@latest<div class="mockup-code">
<pre data-prefix="$"><code>npm i -D flyonui@latest</code></pre>
</div>Code spanning multiple lines.
npm i -D flyonui@latestinstalling...Done!<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>Code example that highlights syntax.
npm i -D flyonui@latestinstalling...Warning!<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>Example of a scrollable code container.
Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.<div class="mockup-code">
<pre data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre>
</div>Example of code without a prefix.
without prefix<div class="mockup-code">
<pre><code>without prefix</code></pre>
</div>You can modify both the background and text colors.
can be any color!<div class="mockup-code bg-primary/20 text-primary rounded-xl">
<pre><code>can be any color!</code></pre>
</div>