Review of tailwind css framework
In this video, we’ll explore the core features of the Tailwind CSS framework that help you build web pages faster. We’ll cover the grid system, the built-in color palette, responsive design, and customization options, including how to add your own colors and extend the framework.
<!--
1. 1rem = 16px
2. 1 point = 4px
3. адаптив
4. dark mode
5. customize
-->
<!--<header class="bg-gray-800 p-4">-->
<!-- <span class="text-white inline-block w-20">Slogan</span>-->
<!--</header>-->
<!--<div class="m-2">-->
<!-- <p class="mb-2">-->
<!-- <button class="bg-blue-500 hover:bg-blue-800 transition-colors text-white p-2 cursor-pointer rounded">Click me</button>-->
<!-- </p>-->
<!-- <p class="mb-2">-->
<!-- <button class="bg-emerald-500 text-white p-2 cursor-pointer rounded">Click me</button>-->
<!-- </p>-->
<!-- <p class="mb-2">-->
<!-- <button class="bg-rose-500 text-white p-2 cursor-not-allowed rounded">Click me</button>-->
<!-- </p>-->
<!--</div>-->
<nav class="bg-brand flex items-center justify-between px-6 py-4 shadow-sm">
<span>Logo</span>
<div class="flex gap-4">
<a class="text-gray-600 hover:text-blue-600" href="/">Home</a>
<a class="text-gray-600 hover:text-blue-600" href="/">Catalog</a>
<a class="text-gray-600 hover:text-blue-600" href="/">Contacts</a>
</div>
</nav>
<div class="flex flex-col md:flex-row gap-6 px-6 mt-4">
<div class="px-2 py-3 flex flex-col items-start gap-2 bg-amber-500 dark:bg-gray-800 md:flex-1">
<img class="w-full h-48 rounded-lg object-cover" src="https://images.unsplash.com/photo-1628329567705-f8f7150c3cff?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<h1 class="text-xl font-bold dark:text-white">Наушники</h1>
<p class="text-gray-600 dark:text-white">Описание</p>
<button class="rounded-lg bg-blue-600 px-6 py-2 text-white hover:bg-blue-700">Купить</button>
</div>
<div class="px-2 py-3 flex flex-col items-start gap-2 bg-amber-500 dark:bg-gray-800 md:flex-1">
<img class="w-full h-48 rounded-lg object-cover" src="https://images.unsplash.com/photo-1628329567705-f8f7150c3cff?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<h1 class="text-xl font-bold dark:text-white">Наушники</h1>
<p class="text-gray-600 dark:text-white">Описание</p>
<button class="rounded-lg bg-blue-600 px-6 py-2 text-white hover:bg-blue-700">Купить</button>
</div>
<div class="px-2 py-3 flex flex-col items-start gap-2 bg-amber-500 dark:bg-gray-800 md:flex-1">
<img class="w-full h-48 rounded-lg object-cover" src="https://images.unsplash.com/photo-1628329567705-f8f7150c3cff?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<h1 class="text-xl font-bold dark:text-white">Наушники</h1>
<p class="text-gray-600 dark:text-white">Описание</p>
<button class="rounded-lg bg-blue-600 px-6 py-2 text-white hover:bg-blue-700">Купить</button>
</div>
</div>
0 Comments