137 lines
4.3 KiB
HTML
137 lines
4.3 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 w-1/2 h-12 bg-red-200">
|
|
<p>Relative parent</p>
|
|
<div class="absolute bottom-0 right-0 bg-red-500">
|
|
<p>Absolute child</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top left corner -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute left-0 top-0 h-16 w-16 bg-yellow-300">01</div>
|
|
</div>
|
|
|
|
<!-- Top right corner -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute top-0 right-0 h-16 w-16 bg-yellow-300">03</div>
|
|
</div>
|
|
|
|
<!-- Bottom left corner -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute bottom-0 left-0 h-16 w-16 bg-yellow-300">07</div>
|
|
</div>
|
|
|
|
<!-- Bottom right corner -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute bottom-0 right-0 h-16 w-16 bg-yellow-300">09</div>
|
|
</div>
|
|
|
|
<!-- Span top edge -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute inset-x-0 top-0 h-16 bg-yellow-300">02</div>
|
|
</div>
|
|
|
|
<!-- Span left edge -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute inset-y-0 left-0 w-16 bg-yellow-300">04</div>
|
|
</div>
|
|
|
|
<!-- Span right edge -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute inset-y-0 right-0 w-16 bg-yellow-300">06</div>
|
|
</div>
|
|
|
|
<!-- Span bottom edge -->
|
|
<div class="relative h-32 w-32 bg-yellow-100">
|
|
<div class="absolute inset-x-0 bottom-0 h-16 bg-yellow-300">08</div>
|
|
</div>
|
|
|
|
<!-- Display Classes -->
|
|
<div>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
|
|
<span class="inline">This is display inline and will wrap normally</span
|
|
>sapiente ut rerum esse ullam provident, fugit
|
|
<span class="inline-block"
|
|
>This is display inline-block and will not extend beyond it's
|
|
parent</span
|
|
>eos quam
|
|
<span class="block"
|
|
>This is display block and will move to it's own line</span
|
|
>
|
|
reprehenderit est hic aut unde sequi, officia, ipsa amet doloribus
|
|
ratione<span class="hidden"
|
|
>This is display none and will not display at all</span
|
|
>
|
|
ad.
|
|
</div>
|
|
|
|
<!-- Z-Index -->
|
|
<div class="relative h-36">
|
|
<div class="absolute left-10 w-24 h-24 bg-blue-200 z-40">1</div>
|
|
<div class="absolute left-20 w-24 h-24 bg-blue-300">2</div>
|
|
<div class="absolute left-40 w-24 h-24 bg-blue-400 z-10">3</div>
|
|
<div class="absolute left-60 w-24 h-24 bg-blue-500 z-20">4</div>
|
|
<div class="absolute left-80 w-24 h-24 bg-blue-600">5</div>
|
|
</div>
|
|
|
|
<!-- Floats -->
|
|
<div class="w-1/2">
|
|
<img class="h-48 w-48 float-right" src="/assets/img/img1.jpg" />
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam
|
|
voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex
|
|
iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae,
|
|
ratione doloribus?
|
|
</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;
|
|
-->
|