Tailwind-CSS-Configuration/example.html at main · ganesh2394/Tailwind-CSS-Configuration · 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
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example | tailwindcss</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-200">

    <!-- Basic Text Styling -->
    <p class="text-red-500">This is red text</p>
    <p class="text-blue-700 font-bold">Bold blue text</p>
    <p class="text-green-700 font-light">Light green text</p>

    <!-- Font Size & Weight -->
    <p class="text-sm">Small Text</p>
    <p class="text-lg font-semibold">Large Semi bold Text</p>
    <p class="text-4xl font-extrabold">Extra Large Bold Text</p>

    <!-- Text Alignment -->
    <p class="text-left bg-blue-600 text-white">Left Aligned Text</p>
    <p class="text-right">Right Aligned Text</p>
    <p class="text-center bg-blue-600 text-white">Center Aligned Text</p>
    <p class="text-justify">Justified Text</p>

    <!-- Text Decoration & Transformation -->
    <p class="underline">Underlined text</p>
    <p class="line-through">Strickthrough text</p>
    <p class="uppercase">UPPERCASE TEXT</p>
    <p class="lowercase">lowercase text</p>
    <p class="capitalize">capitalized each word</p>
    <p class="overline">Overlined text</p>

    <!-- Text with shadow -->
     <p class="capitalize text-2xl font-bold shadow-lg text-gray-800">text with shadow</p>
     <p class="hover:text-blue-500 transition duration-300 border-2 text-center p-2 font-bold mt-2 border-gray-800 max-w-xl mx-auto">Hover To Chage Color</p>

  </body>
</html>