E-commerce

E-commerce 01

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
    <a href="#" class="border-2 border-gray-300">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-4">
      <div class="p-6">
        <span class="uppercase text-sm font-semibold mb-2 inline-block">Tailwind CSS</span>
        <h3 class="text-xl font-semibold text-gray-700 block">WindyBlocks - Prototyping kit</h3>
        <p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
        <div class="flex justify-between mt-4">
          <div class="flex space-x-3 font-semibold">
            <span class="line-through">€99</span>
            <span>€79</span>
          </div>
          <span class="font-semibold">More information »</span>
        </div>
      </div>
    </a>
    <a href="#" class="border-2 border-gray-300">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-4">
      <div class="p-6">
        <span class="uppercase text-sm font-semibold mb-2 inline-block">Tailwind CSS</span>
        <h3 class="text-xl font-semibold text-gray-700 block">SaaS landing page</h3>
        <p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
        <div class="flex justify-between mt-4">
          <div class="flex space-x-3 font-semibold">
            <span class="line-through">€929</span>
            <span>€19</span>
          </div>
          <span class="font-semibold">More information »</span>
        </div>
      </div>
    </a>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
    <a href="#" class="border-2 border-gray-300">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-4">
      <div class="p-6">
        <span class="uppercase text-sm font-semibold mb-2 inline-block">Tailwind CSS</span>
        <h3 class="text-xl font-semibold text-gray-700 block">WindyBlocks - Prototyping kit</h3>
        <p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
        <div class="flex justify-between mt-4">
          <div class="flex space-x-3 font-semibold">
            <span class="line-through">€99</span>
            <span>€79</span>
          </div>
          <span class="font-semibold">More information »</span>
        </div>
      </div>
    </a>
    <a href="#" class="border-2 border-gray-300">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-4">
      <div class="p-6">
        <span class="uppercase text-sm font-semibold mb-2 inline-block">Tailwind CSS</span>
        <h3 class="text-xl font-semibold text-gray-700 block">SaaS landing page</h3>
        <p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
        <div class="flex justify-between mt-4">
          <div class="flex space-x-3 font-semibold">
            <span class="line-through">€929</span>
            <span>€19</span>
          </div>
          <span class="font-semibold">More information »</span>
        </div>
      </div>
    </a>
  </div>
</div>
            
          
        

E-commerce 02

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <h2 class="text-xl lg:text-2xl text-gray-600 mb-4 lg:mb-6 font-semibold">Popular products</h2>
  </div>
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6">
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Lawnmower</h3>
      <span class="block mt-2 font-semibold">€89</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Garden bucket</h3>
      <span class="block mt-2 font-semibold">€34</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Race car small</h3>
      <span class="block mt-2 font-semibold">€29</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Magazine</h3>
      <span class="block mt-2 font-semibold">€19</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
  
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <h2 class="text-xl lg:text-2xl text-gray-600 mb-4 lg:mb-6 font-semibold">Popular products</h2>
  </div>
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6">
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Lawnmower</h3>
      <span class="block mt-2 font-semibold">€89</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Garden bucket</h3>
      <span class="block mt-2 font-semibold">€34</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Race car small</h3>
      <span class="block mt-2 font-semibold">€29</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
    <a href="#">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <h3 class="text-base font-semibold text-gray-700">Magazine</h3>
      <span class="block mt-2 font-semibold">€19</span>
      <div class="flex mt-4">
        <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
      </div>
    </a>
  
  </div>
</div>
            
          
        

E-commerce 03

<div class="rounded-md shadow-lg flex flex-row space-x-4 overflow-hidden max-w-lg">
  <div class="w-48">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="min-h-full">
  </div>
  <div class="py-2 lg:py-4 px-4 flex-1">
    <h3 class="font-semibold text-lg mb-2">Tailwind CSS</h3>
    <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    <div class="flex justify-between items-center">
      <span class="font-semibold text-lg">€79</span>
      <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-2 px-4 text-white mt-4 inline-block">Add to cart</button>
    </div>
  </div>
</div>

Raw

                      
<div class="rounded-md shadow-lg flex flex-row space-x-4 overflow-hidden max-w-lg">
  <div class="w-48">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="min-h-full">
  </div>
  <div class="py-2 lg:py-4 px-4 flex-1">
    <h3 class="font-semibold text-lg mb-2">Tailwind CSS</h3>
    <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    <div class="flex justify-between items-center">
      <span class="font-semibold text-lg">€79</span>
      <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-2 px-4 text-white mt-4 inline-block">Add to cart</button>
    </div>
  </div>
</div>
            
          
        

E-commerce 04

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2 md:order-1">
      <h2 class="text-2xl sm:text-3xl  lg:text-4xl text-gray-700 font-medium mb-6">SaaS landing page</h2>
      <div class="flex  items-end space-x-4 mb-6">
        <div class="flex ">
          <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg>
        </div>
        <div class="font-semibold">- 20 reviews</div>
      </div>
      <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
      <div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8 font-semibold">
        <ul class="space-y-2"> 
          <li class="flex justify-between space-x-4">
            <span>Templates</span>
            <span>20</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Images</span>
            <span>100</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Color styles</span>
            <span>5</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Version</span>
            <span>2.0</span>
          </li>
        </ul>
      </div>
      <div class="flex justify-between items-center mt-6">
        <span class="font-semibold text-lg lg:text-2xl">Special price: €79</span>
        <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-4 px-4 text-white mt-4 inline-block">Add to cart</button>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
    </div>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2 md:order-1">
      <h2 class="text-2xl sm:text-3xl  lg:text-4xl text-gray-700 font-medium mb-6">SaaS landing page</h2>
      <div class="flex  items-end space-x-4 mb-6">
        <div class="flex ">
          <svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            </path>
          </svg>
        </div>
        <div class="font-semibold">- 20 reviews</div>
      </div>
      <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
      <div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8 font-semibold">
        <ul class="space-y-2"> 
          <li class="flex justify-between space-x-4">
            <span>Templates</span>
            <span>20</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Images</span>
            <span>100</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Color styles</span>
            <span>5</span>
          </li>
          <li class="flex justify-between space-x-4">
            <span>Version</span>
            <span>2.0</span>
          </li>
        </ul>
      </div>
      <div class="flex justify-between items-center mt-6">
        <span class="font-semibold text-lg lg:text-2xl">Special price: €79</span>
        <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-4 px-4 text-white mt-4 inline-block">Add to cart</button>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
    </div>
  </div>
</div>
            
          
        

E-commerce 05

<div class="max-w-4xl mx-auto grid grid-cols-2 md:items-center gap-12 bg-white shadow p-8">
  <div class="col-span-2 md:col-span-1">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="image placeholder">
    <span class="block font-semibold mt-5">Available Colors</span>
    <div class="flex space-x-2 mt-2 justify-between">
      <a href="#" class="bg-gray-100 w-10 h-10 border inline-block"><span class="sr-only">gray 100</span></a>
      <a href="#" class="bg-gray-200 w-10 h-10 border inline-block"><span class="sr-only">gray 200</span></a>
      <a href="#" class="bg-gray-300 w-10 h-10 border inline-block"><span class="sr-only">gray 300</span></a>
      <a href="#" class="bg-gray-400 w-10 h-10 border inline-block"><span class="sr-only">gray 400</span></a>
      <a href="#" class="bg-gray-500 w-10 h-10 border inline-block"><span class="sr-only">gray 500</span></a>
      <a href="#" class="bg-gray-600 w-10 h-10 border inline-block"><span class="sr-only">gray 600</span></a>
      <a href="#" class="bg-gray-700 w-10 h-10 border inline-block"><span class="sr-only">gray 700</span></a>
    </div>
  </div>
  <div class="col-span-2 md:col-span-1">
    <h2 class="text-2xl sm:text-2xl text-gray-700 font-medium mb-6">Training Jacket</h2>
    <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
    <a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500 mb-6">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
      <span class="uppercase text-sm">€95,96 add to cart</span>
    </a>
  </div>
</div>

Raw

                      
<div class="max-w-4xl mx-auto grid grid-cols-2 md:items-center gap-12 bg-white shadow p-8">
  <div class="col-span-2 md:col-span-1">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="image placeholder">
    <span class="block font-semibold mt-5">Available Colors</span>
    <div class="flex space-x-2 mt-2 justify-between">
      <a href="#" class="bg-gray-100 w-10 h-10 border inline-block"><span class="sr-only">gray 100</span></a>
      <a href="#" class="bg-gray-200 w-10 h-10 border inline-block"><span class="sr-only">gray 200</span></a>
      <a href="#" class="bg-gray-300 w-10 h-10 border inline-block"><span class="sr-only">gray 300</span></a>
      <a href="#" class="bg-gray-400 w-10 h-10 border inline-block"><span class="sr-only">gray 400</span></a>
      <a href="#" class="bg-gray-500 w-10 h-10 border inline-block"><span class="sr-only">gray 500</span></a>
      <a href="#" class="bg-gray-600 w-10 h-10 border inline-block"><span class="sr-only">gray 600</span></a>
      <a href="#" class="bg-gray-700 w-10 h-10 border inline-block"><span class="sr-only">gray 700</span></a>
    </div>
  </div>
  <div class="col-span-2 md:col-span-1">
    <h2 class="text-2xl sm:text-2xl text-gray-700 font-medium mb-6">Training Jacket</h2>
    <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
    <a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500 mb-6">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
      <span class="uppercase text-sm">€95,96 add to cart</span>
    </a>
  </div>
</div>
            
          
        

E-commerce 06

<div class="rounded-lg shadow-lg flex flex-col md:flex-row space-x-4 overflow-hidden max-w-xl">
  <div class="w-full md:w-48">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="min-h-full object-cover">
  </div>
  <div class="py-6 lg:py-4 px-4 flex-1">
    <h3 class="font-semibold text-lg mb-2">Tailwind Component Pack €79</h3>
    <span class="block font-semibold">5 left</span>
    <p class="mt-4">One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    <div class="flex space-x-2 mt-2">
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">SM</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">MD</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">LG</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XL</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XXL</a>
    </div>
    <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-2 px-4 text-white mt-6 inline-block">Add to cart</button>
  </div>
</div>

Raw

                      
<div class="rounded-lg shadow-lg flex flex-col md:flex-row space-x-4 overflow-hidden max-w-xl">
  <div class="w-full md:w-48">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="min-h-full object-cover">
  </div>
  <div class="py-6 lg:py-4 px-4 flex-1">
    <h3 class="font-semibold text-lg mb-2">Tailwind Component Pack €79</h3>
    <span class="block font-semibold">5 left</span>
    <p class="mt-4">One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    <div class="flex space-x-2 mt-2">
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">SM</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">MD</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">LG</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XL</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XXL</a>
    </div>
    <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-2 px-4 text-white mt-6 inline-block">Add to cart</button>
  </div>
</div>
            
          
        

E-commerce 07

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-12 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl text-gray-700 font-medium mb-3">SaaS landing page</h2>
      <div class="mb-6 font-semibold">
        By Themes.dev
      </div>
      <span class="font-semibold text-lg lg:text-xl block mb-6">Price: €79</span>
      <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
    
      <div class="flex justify-between items-center mt-6">
        <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-4 px-4 text-white mt-4 inline-block">Add to cart</button>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 order-1">
      <div>
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"class="rounded-lg overflow-hidden" alt="">
      </div>
      <div class="flex space-x-2 mt-4">
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
      </div>
    </div>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-12 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl text-gray-700 font-medium mb-3">SaaS landing page</h2>
      <div class="mb-6 font-semibold">
        By Themes.dev
      </div>
      <span class="font-semibold text-lg lg:text-xl block mb-6">Price: €79</span>
      <p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
    
      <div class="flex justify-between items-center mt-6">
        <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-4 px-4 text-white mt-4 inline-block">Add to cart</button>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 order-1">
      <div>
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"class="rounded-lg overflow-hidden" alt="">
      </div>
      <div class="flex space-x-2 mt-4">
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
        <a href="#" class="block rounded-lg overflow-hidden border-2 shadow">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
        </a>
      </div>
    </div>
  </div>
</div>
            
          
        

E-commerce 08

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <div class="overflow-x-auto">
      <div class="align-middle inline-block min-w-full overflow-hidden font-semibold">
        <table class="min-w-full">
          <thead class="text-left bg-gray-200">
            <tr>
              <th class="py-2 px-3"> </th>
              <th class="py-2 px-3">Product</th>
              <th class="py-2 px-3">Quantity</th>
              <th class="py-2 px-3">Price</th>
              <th class="py-2 px-3">Total</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-blue-100  whitespace-nowrap lg:whitespace-normal">
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Red Jacket</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="2"> 
              </td>
              <td class="py-3 px-3">€22</td>
              <td class="py-3 px-3">€49</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Gray shirt</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="1"> 
              </td>
              <td class="py-3 px-3">€45</td>
              <td class="py-3 px-3">€89</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Blue jeans</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="3"> 
              </td>
              <td class="py-3 px-3">€31</td>
              <td class="py-3 px-3">€129</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Total:
              </td>
              <td class="py-3 px-3">€482</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Vat 21%:
              </td>
              <td class="py-3 px-3">€213</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                To pay:
              </td>
              <td class="py-3 px-3">€4128</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <div class="overflow-x-auto">
      <div class="align-middle inline-block min-w-full overflow-hidden font-semibold">
        <table class="min-w-full">
          <thead class="text-left bg-gray-200">
            <tr>
              <th class="py-2 px-3"> </th>
              <th class="py-2 px-3">Product</th>
              <th class="py-2 px-3">Quantity</th>
              <th class="py-2 px-3">Price</th>
              <th class="py-2 px-3">Total</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-blue-100  whitespace-nowrap lg:whitespace-normal">
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Red Jacket</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="2"> 
              </td>
              <td class="py-3 px-3">€22</td>
              <td class="py-3 px-3">€49</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Gray shirt</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="1"> 
              </td>
              <td class="py-3 px-3">€45</td>
              <td class="py-3 px-3">€89</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Blue jeans</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="3"> 
              </td>
              <td class="py-3 px-3">€31</td>
              <td class="py-3 px-3">€129</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Total:
              </td>
              <td class="py-3 px-3">€482</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Vat 21%:
              </td>
              <td class="py-3 px-3">€213</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                To pay:
              </td>
              <td class="py-3 px-3">€4128</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
            
          
        

E-commerce 09

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
  <div class="max-w-screen-lg mx-auto">
    <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Popular products</h2>
    <p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">Open know age use whom him than lady was.</p>
    <div class="flex justify-between items-center space-x-6 mt-6 lg:mt-8 xl:mt-12">
      <button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-6 flex-1">
        <a href="#">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Lawnmower</h3>
          <span class="block mt-2 font-semibold">€89</span>
        </a>
        <a href="#" class="hidden md:block">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Garden bucket</h3>
          <span class="block mt-2 font-semibold">€34</span>
        </a>
        <a href="#" class="hidden lg:block">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Race car small</h3>
          <span class="block mt-2 font-semibold">€29</span>
        </a>
      </div>
      <button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
  <div class="max-w-screen-lg mx-auto">
    <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Popular products</h2>
    <p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">Open know age use whom him than lady was.</p>
    <div class="flex justify-between items-center space-x-6 mt-6 lg:mt-8 xl:mt-12">
      <button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-6 flex-1">
        <a href="#">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Lawnmower</h3>
          <span class="block mt-2 font-semibold">€89</span>
        </a>
        <a href="#" class="hidden md:block">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Garden bucket</h3>
          <span class="block mt-2 font-semibold">€34</span>
        </a>
        <a href="#" class="hidden lg:block">
          <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
          <h3 class="text-base font-semibold text-gray-700">Race car small</h3>
          <span class="block mt-2 font-semibold">€29</span>
        </a>
      </div>
      <button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>
            
          
        

E-commerce 10

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <h2 class="text-xl lg:text-2xl text-gray-600 mb-4 lg:mb-6 font-semibold">Popular Brands</h2>
  </div>
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-8 lg:gap-6">
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Apple</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">HP</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">SamSung</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Acer</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Lenovo</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Asus</span>
    </a>
  </div>
</div>

Raw

                      
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <h2 class="text-xl lg:text-2xl text-gray-600 mb-4 lg:mb-6 font-semibold">Popular Brands</h2>
  </div>
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-8 lg:gap-6">
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Apple</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">HP</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">SamSung</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Acer</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Lenovo</span>
    </a>
    <a href="#" class="text-center shadow-lg bg-white pb-4 rounded-b-lg">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="image placeholder" class="mb-4">
      <span class="text-base font-semibold text-gray-700">Asus</span>
    </a>
  </div>
</div>
            
          
        

总共 10 条记录