134 lines
4.1 KiB
HTML
134 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>TailwindCSS</title>
|
|
</head>
|
|
<body>
|
|
<!-- Positioning -->
|
|
<div class="relative h-12 bg-red-200 w-1/2">
|
|
<p>Parent</p>
|
|
<div class="absolute bottom-0 right-0 bg-red-700">
|
|
<p>Absolute</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top left corner -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute left-0 top-0 h-16 w-16 bg-yellow-400"></div>
|
|
</div>
|
|
|
|
<!-- Top right corner -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute right-0 top-0 h-16 w-16 bg-yellow-400"></div>
|
|
</div>
|
|
|
|
<!-- Bottom left corner -->
|
|
<!-- Top right corner -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute right-0 bottom-0 h-16 w-16 bg-yellow-400"></div>
|
|
</div>
|
|
|
|
<!-- Bottom right corner -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute left-0 bottom-0 h-16 w-16 bg-yellow-400"></div>
|
|
</div>
|
|
|
|
<!-- Span top edge -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute inset-x-0 bottom-0 h-16 bg-yellow-400">
|
|
<p>Span top edge</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Span left edge -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute inset-y-0 left-0 bg-yellow-400 w-16">
|
|
<p>Span left edge</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Span right edge -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute inset-y-0 right-0 bg-yellow-400 w-16">
|
|
<p>Span right edge</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Span bottom edge -->
|
|
<div class="relative h-32 w-23 bg-yellow-200 w-1/2">
|
|
<div class="absolute inset-x-0 bottom-0 bg-yellow-400 h-16">
|
|
<p>Span bottom edge</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Display Classes -->
|
|
<div class="relative">
|
|
Lorem ipsum dolor sit,
|
|
<span class="inline font-bold">This is inline</span> amet consectetur
|
|
adipisicing <span class="inline-block font-bold">inline-block</span>elit.
|
|
Iste, deleniti? Culpa sed <span class="hidden">this is hidden</span>nam
|
|
quisquam natus aliquid!
|
|
</div>
|
|
|
|
<!-- Z-Index -->
|
|
<div class="relative bg-orange-400 h-24">
|
|
<div class="absolute left-10 h-24 w-24 bg-blue-200 z-40">1</div>
|
|
<div class="absolute left-20 h-24 w-24 bg-blue-300">2</div>
|
|
<div class="absolute left-40 h-24 w-24 bg-blue-400 z-10">3</div>
|
|
<div class="absolute left-60 h-24 w-24 bg-blue-500 z-20">4</div>
|
|
<div class="absolute left-80 h-24 w-24 bg-blue-600">5</div>
|
|
</div>
|
|
|
|
<!-- Floats -->
|
|
<div class="relative w-1/2 bg-green-200">
|
|
<img class="float-right h-48 w-48" src="@/assets/heartFilled.png" alt=""/>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
|
|
mollitia labore similique.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Position Classes
|
|
static position: static;
|
|
fixed position: fixed;
|
|
absolute position: absolute;
|
|
relative position: relative;
|
|
sticky position: sticky;
|
|
-->
|
|
|
|
<!-- Display Classes
|
|
block display: block;
|
|
inline-block display: inline-block;
|
|
inline display: inline;
|
|
flex display: flex;
|
|
inline-flex display: inline-flex;
|
|
table display: table;
|
|
grid display: grid;
|
|
inline-grid display: inline-grid;
|
|
contents display: contents;
|
|
list-item display: list-item;
|
|
hidden display: none;
|
|
-->
|
|
|
|
<!-- Z-Index
|
|
z-0 z-index: 0;
|
|
z-10 z-index: 10;
|
|
z-20 z-index: 20;
|
|
z-30 z-index: 30;
|
|
z-40 z-index: 40;
|
|
z-50 z-index: 50;
|
|
z-auto z-index: auto;
|
|
-->
|
|
|
|
<!-- Float
|
|
float-right float: right;
|
|
float-left float: left;
|
|
float-none float: none;
|
|
-->
|