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 thehtml
tag of you document to turn the dark mode on, you can also move the transition classes to yourhtml
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>
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)