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-900 hover:-translate-y-2 hover:shadow-xl shadow-gray-800" 3> 4 <div 5 alt="image here" 6 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-800" 7 ></div> 8 9 <div class=""> 10 <h2 class="text-2xl font-bold mb-2 text-gray-100">Dark Card</h2> 11 <p class="text-gray-200 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-700 bg-gray-800 text-gray-100 mt-6 rounded p-2 px-6" 20 > 21 Explore 22 </button> 23</div> 24
485 views
Variation of acard
MIT License