tailwind实现随机颜色文字卡片效果代码-html代码-BFW代码库

tailwind实现随机颜色文字卡片效果代码

代码语言：html

代码描述：tailwind实现随机颜色文字卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en" class="bg-black">

<head>

    <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
    <style>
        .cardColor, .textColor {
        	transition: background-color .5s ease-in 0s;
        }
    </style>



</head>

<body>
    <div class="relative py-12 sm:py-8 xl:py-3  min-w-full min-h-full flex items-center justify-center">
        <div class="mx-auto grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 place-items-stretch text-white">

            <div class="card bg-red-400 max-w-xs py-12 px-6 relative">
                <div class=" animate-pulse bg-current rounded text-6xl break-words font-bold cardColor">Primary color</div>
                <div class="py-8 text-xl break-words font-bold">&
                    <span class=" animate-pulse bg-current rounded textColor">Secondary</span> -
                </div>
                <div class="text-md mb-16">The quick brown,
                    <span class=" animate-pulse bg-current rounded cardColor lowercase">primary</span>, and
                    <span class=" animate-pulse bg-current rounded textColor lowercase">secondary</span> fox jumped over the lazy dog.
                </div>
                <div class="absolute right-3 bottom-3">01</div>
            </div>

            <div class="card bg-yellow-600 max-w-xs py-12 px-6 relative">
                <div class=" animate-pulse bg-current rounded text-6xl break-words font-bold cardColor">Primary color</div>
                <div class="py-8 text-xl break-words font-bold">&
                    <span class=" animate-pulse bg-current ro.........完整代码请登录后点击上方下载按钮下载查看