<!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>Backgrounds & Shadows</title>
</head>
<body>
<!-- Background Classes -->
<div
class="h-64 w-72 bg-blue-500 bg-cover bg-no-repeat bg-center"
style="background-image: url('../assets/img/img1.jpg')"
></div>
<!-- Gradients -->
<div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div
class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
></div>
<!-- Shadows -->
<div class="w-96 mt-6 ml-4 p-3 shadow-md">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-2xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-inner">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Shadow Colors -->
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-blue-500/50">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-red-500/100">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Mix Blend -->
<div class="flex justify-center -space-x-24">
<div class="mix-blend-multiply bg-blue-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="mix-blend-multiply bg-pink-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
</div>
</body>
</html>
<!-- Background Size
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;
-->
<!-- Background Repeat
bg-repeat background-repeat: repeat;
bg-no-repeat background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;
-->
<!-- Background Position
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;
-->
<!-- Background Attachment
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;
-->
<!--
Shadows
shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none box-shadow: 0 0 #0000;
-->
안녕하세요!