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-purple-500 hover:-translate-y-2 hover:shadow-xl shadow-purple-400" 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-purple-400" 6 alt="image here" 7 ></div> 8 9 <div class=""> 10 <h2 class="text-2xl font-bold mb-2 text-white">Elegant 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-purple-400 bg-purple-600 text-white mt-6 rounded p-2 px-6" 20 > 21 Explore 22 </button> 23</div> 24
574 views
Variation of acard
MIT License