Tailwind CSS Window Mockup Light/Dark

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 your document to turn the dark mode on, you can also move the transition classes to yourHTML tag.

⚠ This behavior is triggered by using the 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>

Thank You ❤️

I wish my posts to be useful to anyone who's new to the world of web development, programming, or anybody who's curious 🧐!

If you find the content useful to you, please comment your thoughts, I would love to learn from you all.

Thank you for your loving directions.