Tailwind CSS Window Mockup Light/Dark

#css #html #webdev #tailwindcss

Farhad Uneci Dec 27, 2020 ・2 min read

Hey there, 👋
Here is a Window Mockup built with tailwind CSS

⭐ I've also included the new Dark Mode feature in Tailwind, so you only need to add the dark class to the parent element or the html tag of you document to turn the dark mode on, you can also move the transition classes to your html tag.

⚠ This behavior is triggered by using class option in your tailwind config file, other methods are described in Documentation

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

<div class="max-w-2xl transition-colors ease-linear shadow-md">
    <div class="w-full h-12 rounded-t-lg bg-gray-200 dark:bg-gray-900 flex justify-start items-center space-x-1.5 px-4">
        <span class="w-3 h-3 border-2 border-transparent dark:border-red-400 rounded-full bg-red-400 dark:bg-transparent "></span>
        <span class="w-3 h-3 border-2 border-transparent dark:border-yellow-400 rounded-full bg-yellow-400 dark:bg-transparent"></span>
        <span class="w-3 h-3 border-2 border-transparent dark:border-green-400 rounded-full bg-green-400 dark:bg-transparent"></span>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 border-t-0 w-full h-96 rounded-b-lg"></div>
</div>