tailwind basic gallery image

នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ជាមួយ gallery image ដែលមានដូចខាងក្រោមនេះ

Menu ឬ Menu navigation
<body>
    <!-- Global conatain -->
     <div class="flex items-center justify-center bg-gray-500 min-h-screen">
      <!-- Card Container -->
       <div class="bg-slate-50 p-6 m-3 space-y-10 rounded-lg">
         <!-- Menu Contain -->
          <div class="flex flex-col md:flex-row items-center justify-center space-y-3 md:space-y-0 md:space-x-8 md:mb-24 md:justify-end">
            <!-- Menu Items -->
             <div class="group">
               <a class="text-xl" href="#">Tea</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Coffe</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Milk</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
          </div><!--Close menu contain-->
          
       </div><!--close Card Container-->
     </div>
search
<body>
    <!-- Global conatain -->
     <div class="flex items-center justify-center bg-gray-500 min-h-screen">
      <!-- Card Container -->
       <div class="bg-slate-50 p-6 m-3 space-y-10 rounded-lg">
         <!-- Menu Contain -->
          <div class="flex flex-col md:flex-row items-center justify-center space-y-3 md:space-y-0 md:space-x-8 md:mb-24 md:justify-end">
            <!-- Menu Items -->
             <div class="group">
               <a class="text-xl" href="#">Tea</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Coffe</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Milk</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
          </div><!--Close menu contain-->
          
         <!-- Search-->
          <div class="flex flex-col md:flex-row space-y-5 justify-between md:space-y-0">
            <!-- Input and SVG -->
             <div class="flex justify-between border-b">
               <input type="text" placeholder="Search" 
               class="ml-6 border-none placeholder:font-thin rounded-lg md:w-80 focus:outline-none" >
               <button>
                  <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-8 text-gray-300 duration-200 hover:scale-110"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="10" cy="10" r="7" />
                <line x1="21" y1="21" x2="15" y2="15" />
              </svg>
               </button>
             </div><!--close input and svg-->
             <!-- Upload Button -->
              <button class="py-3 px-14 bg-blue-700 border border-blue-700 duration-200 text-white rounded-lg
              hover:bg-white hover:text-black">Upload</button>
          </div><!--close search -->

       </div><!--close Card Container-->
     </div>
</body>
Gallery image
<body>
    <!-- Global conatain -->
     <div class="flex items-center justify-center bg-gray-500 min-h-screen">
      <!-- Card Container -->
       <div class="bg-slate-50 p-6 m-3 space-y-10 rounded-lg">
         <!-- Menu Contain -->
          <div class="flex flex-col md:flex-row items-center justify-center space-y-3 md:space-y-0 md:space-x-8 md:mb-24 md:justify-end">
            <!-- Menu Items -->
             <div class="group">
               <a class="text-xl" href="#">Tea</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Coffe</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
             <div class="group">
               <a class="text-xl" href="#">Milk</a>
               <div class="mx-2 mt-2 border-b-2 border-black opacity-0 group-hover:opacity-100 bg-opacity-40"></div>
             </div>
          </div><!--Close menu contain-->
          
         <!-- Search-->
          <div class="flex flex-col md:flex-row space-y-5 justify-between md:space-y-0">
            <!-- Input and SVG -->
             <div class="flex justify-between border-b">
               <input type="text" placeholder="Search" 
               class="ml-6 border-none placeholder:font-thin rounded-lg md:w-80 focus:outline-none" >
               <button>
                  <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-8 text-gray-300 duration-200 hover:scale-110"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="10" cy="10" r="7" />
                <line x1="21" y1="21" x2="15" y2="15" />
              </svg>
               </button>
             </div><!--close input and svg-->
             <!-- Upload Button -->
              <button class="py-3 px-14 bg-blue-700 border border-blue-700 duration-200 text-white rounded-lg
              hover:bg-white hover:text-black">Upload</button>
          </div><!--close search -->

          <!-- Gallery Container -->
           <div class="grid gap-4 md:grid-cols-3">
            <!-- Image 1-->
            <div class="relative group">
               <img src="./coffe/milk latte.jpg" alt="" class="w-72">
               <div class="absolute left-0 right-0 bottom-0 bg-black text-white p-2 px-4 opacity-0 
                group-hover:opacity-100 bg-opacity-40">
                  <div class="flex justify-between">
                     <div class="font-normal">
                        <p>milk latte</p>
                     </div>
                     <div class="flex items-center">
                        <img src="./bookmark-50.png" alt="" class="w-8">
                     </div>
                  </div>
               </div>
            </div>
            
           </div><!--close gallery image-->
       </div><!--close Card Container-->
     </div>
</body>

simple code

Tags
Reactions

Post a Comment

0 Comments