Card

A card for display a list of courses

20
0
HTML + Tailwind
<div class="mx-auto max-w-[475px] min-h-[690px] overflow-hidden rounded-xl bg-white shadow-xl p-8 pt-o relative border border-gray-200"> <span class="bg-neutral-300 text-black text-lg mx-auto p-4 rounded-b-lg absolute top-0 shadow-lg inset-x-0 max-w-44 text-center z-1">October 20th </span> <div class="rounded-full aspect-square bg-gray-200 size-1/2 mx-auto mt-12 flex flex-col justify-center items-center"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 25.1999V28.7999M12.6 30.5999H23.4M7.20001 25.1999H28.8C30.7882 25.1999 32.4 23.5881 32.4 21.5999V8.9999C32.4 7.01168 30.7882 5.3999 28.8 5.3999H7.20001C5.21178 5.3999 3.60001 7.01168 3.60001 8.9999V21.5999C3.60001 23.5881 5.21178 25.1999 7.20001 25.1999Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <h3 class="text-center text-3xl mt-12">Online Training</h3> <p class="text-xl text-center text-neutral-400 my-8 max-w-[400px] mx-auto">Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalar dolor elementum tempus hac.</p> <div class="flex flex-col items-center justify-center"> <a href="#" class="w-64 inline-flex justify-center items-center rounded-full px-6 py-2 text-lg text-center font-medium transition duration-150 ease-in-out px-6 bg-gray-700 text-white hover:bg-gray-500 hover:shadow-secondary focus:bg-gray-500 focus:shadow-secondary focus:outline-none focus:ring-0 active:bg-gray-500 mb-8">Main action</a> <a href="" class="w-64 border border-neutral-500 inline-flex items-center justify-center rounded-full px-6 py-2 text-lg font-medium transition duration-150 ease-in-out px-6 focus:shadow-secondary focus:outline-none focus:ring-0 hover:shadow-lg hover:border-neutral-400 hover:bg-neutral-200 text-neutral-500">More action</a> </div> </div>
farid silva

farid silva

@faridsilva