<!--
  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>