[email protected]

Card list Tailwind CSS - posts - articles

By maxacrea

Liste cartes

Share

/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative flex flex-col shadow-md rounded-xl overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 max-w-sm\">\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-orange-600 absolute z-30 top-2 right-0 mt-2 mr-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"z-20 absolute h-full w-full top-0 left-0 \"> <\/a>\r\n <div class=\"h-auto overflow-hidden\">\r\n <div class=\"h-44 overflow-hidden relative\">\r\n <img src=https://www.creative-tim.com/"https:////picsum.photos//400//400/" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white py-4 px-3\">\r\n <h3 class=\"text-xs mb-2 font-medium\">Des cadeaux incroyables pr\u00eats \u00e0 \u00eatre utilis\u00e9s dans votre prochain projet<\/h3>\r\n <div class=\"flex justify-between items-center\">\r\n <p class=\"text-xs text-gray-400\">\r\n Lorem, ipsum dolor sit amet\r\n <\/p>\r\n <div class=\"relative z-40 flex items-center gap-2\">\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a class=\"text-orange-600 hover:text-blue-500\" href=https://www.creative-tim.com/"/">/r/n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":15993,"collection_id":null,"fork_id":null,"votes":2,"score":"5.0","visits":7958,"popularity":360,"slug":"card-list-tailwindcss-posts-articles","approved":1,"created_at":"2023-12-24T00:00:00.000000Z","updated_at":"2025-06-18T12:17:59.000000Z","downloads":110,"code_views":2118,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11059,"model_type":"App\\Component","model_id":5945,"collection_name":"preview","name":"temp37616","file_name":"temp37616.png","mime_type":"image\/png","disk":"public","size":296630,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp37616___media_library_original_1280_957.png","temp37616___media_library_original_1070_800.png","temp37616___media_library_original_895_669.png","temp37616___media_library_original_749_560.png","temp37616___media_library_original_627_469.png","temp37616___media_library_original_524_392.png","temp37616___media_library_original_439_328.png","temp37616___media_library_original_367_274.png","temp37616___media_library_original_307_230.png","temp37616___media_library_original_257_192.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEraUIrMjM0Y0Y0YmRrWU1QYXQzaUkzc2NuczJOVDl0enc0MTJZQ3JCaDdVL3JFUTVHTEYrMjU0YmU4TUJWZ1I3VVBFUkQyYko3WDl0and4TmVtM0laVytsTDZ4RzRlelo4NHllTHZodStzc0pOR2tFZ1BYYlhBM0c1MERGOFcvRFZ0VkliUjVBNDc3YUx4dU1FOFcvRFZ0VllIUjVCSU9oMjBYamNCOXI0citHc21zbFRvOGl2bnJ0b3ZHNHVoOW5TZnMwK0RKYmp6anBrZS8xMml2UStyeE1lY2FmMlp2QlpuODMrekk5L3J0bzlnZzV3UDdNM2dzemViL1prZS8xMmlqNnZFZk94ZjhBaG1md1lKL05HbVI3L1hhS1BZUkQyalAvMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":3,"created_at":"2023-12-24T17:04:50.000000Z","updated_at":"2023-12-24T17:04:52.000000Z","conversions_disk":"public","uuid":"bfc259fb-30c3-404b-9f11-1c4595983750","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11059\/temp37616.png","preview_url":""}],"author":{"id":15993,"name":"maxacrea","slug":"maxacrea","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/139033b97f665c652f24602e0bdfa9f7","header":null,"created_at":"2023-12-22T19:14:37.000000Z","updated_at":"2023-12-23T09:13:42.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:06:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5945,"tag_id":4}},{"id":23,"name":{"en":"Grid"},"description":"A Grid component is used to create visual consistency between layouts while allowing flexibility across a wide variety of designs. See below our collection of Grid examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Grid examples that you can add directly to your Tailwind UI project to create visual consistency between layouts.","slug":{"en":"grid"},"type":null,"order_column":22,"created_at":"2022-08-31T14:18:07.000000Z","updated_at":"2022-12-21T11:18:42.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5945,"tag_id":23}},{"id":41,"name":{"en":"Layout"},"description":"A layout component includes sections of your website that you want to share across multiple pages. See below our collection of Layouts that you can add directly to your Tailwind UI project.","meta_description":"Visit our Layouts collection that you can add to your Tailwind UI project to create awesome websites.","slug":{"en":"layout"},"type":null,"order_column":40,"created_at":"2022-08-31T14:27:17.000000Z","updated_at":"2022-12-21T11:01:02.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5945,"tag_id":41}},{"id":59,"name":{"en":"List"},"description":"The Tailwind CSS List component is used to for display list of items or data. It can often be used for navigation or menus. See below our collection of List components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS List component examples that you can add to your web project to create awesome web apps.","slug":{"en":"list"},"type":null,"order_column":48,"created_at":"2023-10-05T07:47:36.000000Z","updated_at":"2023-10-05T07:47:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5945,"tag_id":59}}],"fork":null,"favorites":[{"id":4918,"name":"M-erick","slug":"m-erick","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61746940?v=4","header":null,"created_at":"2021-09-08T17:04:49.000000Z","updated_at":"2021-09-08T17:04:49.000000Z","pivot":{"component_id":5945,"user_id":4918}},{"id":6441,"name":"dhil","slug":"dhil","bio":null,"avatar":"\/storage\/avatars\/ubxaDiYYw3Z2tlxx4XKYPnCaTHa1ZiYfb3ZwSLHA.jpg","header":null,"created_at":"2022-01-09T07:18:43.000000Z","updated_at":"2022-01-09T07:23:40.000000Z","pivot":{"component_id":5945,"user_id":6441}},{"id":20150,"name":"nicolasjrz","slug":"nicolasjrz-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61887365?v=4","header":null,"created_at":"2024-08-14T15:26:13.000000Z","updated_at":"2024-08-14T15:26:13.000000Z","pivot":{"component_id":5945,"user_id":20150}},{"id":22527,"name":"abhishek kumar","slug":"abhishek-kumar-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/978d9f571e4c2fe9722bebda705ead0e","header":null,"created_at":"2025-05-02T10:50:40.000000Z","updated_at":"2025-05-02T10:50:40.000000Z","pivot":{"component_id":5945,"user_id":22527}}]}" :edit="false"> Full screen Preview

maxacrea

16 components Profile On

Card list Tailwind CSS - posts - articles

Community Rate

Related components