Tailwind-CSS-Configuration/border1.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border | Tailwind</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="h-screen justify-center items-center flex">
    <div class="block space-y-4">
      <div class="flex space-x-3">
        <div class="p-2 border border-indigo-600">Border A</div>
        <div class="p-2 border-2 border-indigo-600">Border B</div>
        <div class="p-2 border-4 border-indigo-600">Border C</div>
        <div class="p-2 border-8 border-indigo-600">Border D</div>
      </div>

      <div class="flex space-x-3">
        <div class="border-l-4 border-indigo-400 p-2">Border L</div>
        <div class="border-r-4 border-indigo-400 p-2">Border R</div>
        <div class="border-t-4 border-indigo-400 p-2">Border T</div>
        <div class="border-b-4 border-indigo-400 p-2">Border B</div>
      </div>

      <div class="flex space-x-3">
        <div class="border-x-4 border-indigo-400 p-2">Border Verticle</div>
        <div class="border-y-4 border-indigo-400 p-2">Border Horizontal</div>
      </div>
    </div>
  </body>
</html>