tailwind实现一个翻转时钟效果代码-html代码-BFW代码库

tailwind实现一个翻转时钟效果代码

代码语言：html

代码描述：tailwind实现一个翻转时钟效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
 <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">
</head>

<body >
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-500 to-indigo-800">

  <!-- clock wrapper -->
  <div class="relative font-mono font-extrabold text-9xl grid grid-cols-2 text-right text-white shadow-2xl gap-x-px border-8 border-yellow-100 rounded">

    <!-- clock stand -->
    <div class="absolute inset-x-0 -bottom-5 mx-auto flex justify-center">
      <div class="w-3/4 h-5 bg-yellow-100 rounded"></div>
    </div>

    <!-- left timer -->
    <div class="relative py-8 px-5">
      <div class="absolute inset-0 w-full h-full grid grid-rows-2">

        <!-- background squares -->
        <div class="bg-gradient-to-br from-gray-800 to-gray-900"></div>
        <div class="bg-gradient-to-br from-gray-.........完整代码请登录后点击上方下载按钮下载查看