순서 있는 카드
cards 지제이웍스
gjworks.dev
Components UI Examples
Workspace - Tailwind CSS Components
Components UI Examples
            
Code Examples
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"><div class="grid grid-cols-3 gap-8 pt-12"> <div class="col-span-1"> <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full"> <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg"> Lorem ipsum </div> <div class="w-full flex justify-center"> <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">1</div> </div> <div class="pt-5 pb-10 px-3 text-center text-white text-sm"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit! </div> </div> </div> <div class="col-span-1"> <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full"> <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg"> Lorem ipsum </div> <div class="w-full flex justify-center"> <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">2</div> </div> <div class="pt-5 pb-10 px-3 text-center text-white text-sm"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit! </div> </div> </div> <div class="col-span-1"> <div class="hover:shadow-none transform hover:translate-y-6 duration-500 relative shadow-xl rounded-lg bg-gray-800 h-full"> <div class="bg-gray-900 pt-6 pb-12 text-yellow-500 font-medium text-lg text-center rounded-t-lg"> Lorem ipsum </div> <div class="w-full flex justify-center"> <div class="flex justify-center items-center text-xl font-semibold w-10 h-10 text-gray-900 rounded-full bg-yellow-500 shadow-lg -mt-5 z-10">3</div> </div> <div class="pt-5 pb-10 px-3 text-center text-white text-sm"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ea assumenda excepturi a nemo quam eveniet suscipit magnam id reiciendis placeat. Tempora culpa beatae quidem, at iste, illo et fugit! </div> </div> </div> </div>