Card by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="group flex flex-col justify-start items-start gap-2 w-96 h-56 duration-500 relative rounded-lg p-4 bg-gray-100 hover:-translate-y-2 hover:shadow-xl shadow-gray-300" 3> 4 <div 5 class="absolute duration-700 shadow-md group-hover:-translate-y-4 group-hover:-translate-x-4 -bottom-10 -right-10 w-1/2 h-1/2 rounded-lg bg-gray-200" 6 alt="image here" 7 ></div> 8 9 <div class=""> 10 <h2 class="text-2xl font-bold mb-2 text-gray-800">Card</h2> 11 <p class="text-gray-700 line-clamp-3"> 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis 13 magna quis lectus fermentum, quis scelerisque orci pellentesque. Duis id 14 porta justo. Sed ac enim id justo tincidunt hendrerit id ac lectus. 15 Pellentesque maximus posuere tortor vitae consequat. 16 </p> 17 </div> 18 <button 19 class="hover:bg-gray-300 bg-gray-200 text-gray-800 mt-6 rounded p-2 px-6" 20 > 21 Explore 22 </button> 23</div> 24
616 views
616 views
Variations
2486 views
MIT License