Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- spacing -->
<div class="p-20 bg-green-700">

  <h2 class="mb-2 text-5xl font-bold text-green-100">Spacing Section</h2>
  <p class="mb-6 text-green-200 text-xl">Tailwind helps us space things out with margin and padding.</p>

  <button class="mr-3 py-2 px-4 bg-purple-600 hover:bg-purple-500 text-purple-100 rounded transition duration-300">Learn More</button>
  <button class="py-2 px-8 bg-yellow-400 hover:bg-yellow-300 text-yellow-900 rounded transition duration-300 shadow-lg">Sign Up</button>

</div>

<!-- box properties -->
<!-- background, borders, rounding, shadows -->
<div class="p-20 bg-blue-400">
  <h2 class="mb-4 text-4xl text-blue-800">Box Properties</h2>
  <div class="p-10 bg-purple-400 rounded-lg border-purple-500 border shadow-2xl text-purple-700 text-center font-bold uppercase tracking-widest">I am a box</div>
</div>

<!-- sizing & numbering -->
<div class="py-20 px-10 bg-yellow-300">

  <button class="p-4 bg-yellow-400 text-yellow-800 rounded w-8">click me</button>
  <button class="p-4 bg-yellow-400 text-yellow-800 rounded w-12">click me</button>
  <button class="p-4 bg-yellow-400 text-yellow-800 rounded w-20">click me</button>
  <button class="p-4 bg-yellow-400 text-yellow-800 rounded w-32">click me</button>
  <button class="p-4 bg-yellow-400 text-yellow-800 rounded w-48 h-48">click me</button>

</div>

<!-- typography -->
<div class="p-20 text-gray-800 leading-relaxed text-lg">
  <h2 class="text-5xl text-gray-700 font-bold tracking-wide">Learning Tailwind is Fun!</h2>
  <h3 class="mb-8 text-2xl text-blue-500">More fun than I expected!</h3>

  <p class="mb-8">Cupcake ipsum dolor sit amet gingerbread. Tiramisu sweet powder carrot cake dragée. Wafer liquorice bear claw sweet caramels danish jelly-o gingerbread jelly. Pastry gummies ice cream pie icing. Fruitcake danish lollipop apple pie dragée gingerbread. Candy canes jelly beans oat cake sweet.</p>
  <p class="mb-8">Donut marzipan tootsie roll candy canes tart chocolate bar croissant gummies bonbon. Powder marzipan sugar plum biscuit tart biscuit. Danish muffin cake. Tart cake gummies danish. Candy canes gummies gummi bears candy croissant liquorice jujubes. Carrot cake gummies danish jujubes chocolate cake chocolate wafer halvah. Jelly apple pie pudding marzipan muffin marshmallow cake lollipop.</p>
  <p class="mb-8">Lollipop sugar plum gummies bear claw. Muffin gingerbread croissant cake chocolate bar cookie. Tart cake marshmallow macaroon muffin fruitcake. Gingerbread jelly beans pie toffee liquorice chocolate macaroon. Gummi bears marzipan biscuit liquorice ice cream. Cupcake chocolate chocolate bar. Danish toffee donut tootsie roll bear claw.</p>
</div>

<!-- colors -->
<div class="p-20 bg-gray-800 space-y-3">
  <div class="p-4 rounded-lg bg-red-100 text-red-900 hover:bg-blue-900 hover:text-blue-100 hover:scale-105 transform transition duration-200">i am a box</div>
  <div class="p-4 rounded-lg bg-red-200">i am a box</div>
  <div class="p-4 rounded-lg bg-red-300">i am a box</div>
  <div class="p-4 rounded-lg bg-red-400">i am a box</div>
  <div class="p-4 rounded-lg bg-red-500">i am a box</div>
  <div class="p-4 rounded-lg bg-red-600 text-red-100">i am a box</div>
  <div class="p-4 rounded-lg bg-red-700 text-red-100">i am a box</div>
  <div class="p-4 rounded-lg bg-red-800 text-red-200">i am a box</div>
  <div class="p-4 rounded-lg bg-red-900 text-red-300">i am a box</div>
  <div class="p-4 rounded-lg bg-blue-600 text-blue-200 border border-blue-700">i am a box</div>
</div>

<!-- psuedo classes -->
<!-- transitions & transforms -->
<!-- animations -->
              
            
!

CSS

              
                /*

 No custom CSS thanks to Tailwind!
 tailwindcss.com

*/

              
            
!

JS

              
                /*

  For the course: Beginner Tailwind
  👉 BeginnerTailwind.com
  😁 By @chris__sev
  
*/

              
            
!
999px

Console