HTML/tailwind.html at main · SHARDAKOSHTA/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center h-[100vh]">
    <!-- <div class="flex bg-blue-500 h-[500px] w-[500px] transition-colors duration-500 hover:bg-pink-600 "></div> -->
      <!-- <div class="flex bg-blue-500 h-[500px] w-[500px] transition-colors duration-500 hover:bg-pink-600 transition-shadow duration-500 hover:shadow-x1"></div> -->
        <!-- <div class="flex bg-blue-500 h-[500px] w-[500px]  transition-transform duration-500 hover:rotate-180 "></div> -->
                 <!-- <div class="flex bg-blue-500 h-[500px] w-[500px]  transition-transform duration-500 hover:scale-110 "></div> -->
                          <!-- <div class="flex bg-blue-500 h-[500px] w-[500px]  transition-transform duration-500 hover:rotate-45 "></div> -->
                                   <!-- <div class="flex bg-blue-500 h-[500px] w-[500px] rounded-full animate-spin "></div> -->
                                            <!-- <div class="flex bg-blue-500 h-[500px] w-[500px]  transition-transform duration-500 hover:rotate-180  "><img src="https://images.unsplash.com/photo-1768463851971-a813d5797341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8RnpvM3p1T0hONnd8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover rounded-ig"></div> -->
                                              <!-- <div class="flex bg-blue-500 h-[200px] w-[200px] animate-bounce"></div> -->
                                                   <!-- <div class="flex bg-blue-500 h-[200px] w-[200px] animate-spin"></div> -->
                                                     <!-- <div class="flex bg-blue-500 h-[200px] w-[200px] animate-pulse"></div> -->
                                                       <!-- <div class="flex bg-blue-500 h-[200px] w-[200px] animate-ping"></div> -->

  <!-- <div class="flex bg-blue-500 h-[300px] w-[300px] transition-colors duration-500 hover:bg-pink-600 shadow-2xs ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas placeat nobis ipsa aliquam debitis in quo ratione eos doloribus? Accusantium itaque eveniet blanditiis aspernatur, eligendi laborum eos dolorum alias commodi.</div> -->
    <div class="flex bg-blue-500 h-[300px] w-[300px] transition-colors duration-500 hover:bg-pink-600 text-shadow-2xs ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas placeat nobis ipsa aliquam debitis in quo ratione eos doloribus? Accusantium itaque eveniet blanditiis aspernatur, eligendi laborum eos dolorum alias commodi.</div>
</div>

</body>
</html>