DEV Community

loading...

Tailwind CSS Window Mockup Light/Dark

farhaduneci profile image Farhad Uneci ・2 min read

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

Preview

⭐ 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',
  // ...
}
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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 loving directions.

Discussion (0)

pic
Editor guide