Snippets Collections
<html>

<body>
    <div class="dark relative min-h-screen transition-all ease-out" id="parent">
        <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2">
            <span>dark</span>
            <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" />
        </label>
        <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl">
            <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1>
            <div>
                <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p>
            </div>
        </div>
    </div>
</body>

</html>
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
<div>
    <div class="sticky top-0 flex h-12 w-full items-center bg-black">
        <input type="checkbox" class="peer hidden" id="a" />
        <label for="a" class="select-none border px-4 py-2 text-white"> ☰ </label>

        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 mt-12 w-64 -translate-x-full transform bg-gray-800 px-4 transition-transform duration-300 ease-in-out peer-checked:translate-x-0">
            <div class="flex h-full flex-col justify-between gap-4">
                <div class="border border-emerald-500">
                    <h1 class="text-2xl leading-loose text-white">Logo</h1>
                </div>
                <div class="overflow-y-auto border border-orange-500">
                    <!-- Links -->
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 1</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 2</a>
                    <div class="group">
                        <div class="relative">
                            <a href="#" class="group block py-2 text-white hover:bg-gray-700">
                                Link 3
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 transform text-white transition-transform group-hover:rotate-180">▼</span>
                            </a>
                        </div>
                        <div class="mt-2 hidden space-y-2 pl-4 group-hover:flex group-hover:flex-col">
                            <a href="#" class="text-white">Link 3.1</a>
                            <a href="#" class="text-white">Link 3.2</a>
                        </div>
                    </div>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                </div>
                <!-- Settings -->
                <div class="border border-lime-500"><button class="block py-2 text-white hover:bg-gray-700">Settings</button></div>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-grow bg-gray-100 p-4">
        <!-- Your Main Content Goes Here -->
        <p>....</p>
    </div>
</div>
// copy paste react
return (
<>
<style>
{`
.animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;}

.animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;}

.wrapper:hover .animated-text::after, .wrapper:hover .animated-text {
            transform: scaleX(1);}

//or (removing redundant, see if it works)
.wrapper:hover .animated-text1::after{
            transform: scaleX(1);}
 `}
<style>
<button className="wrapper">
<p className="animated-text">click</p>
</button>
</>
)
// copy paste for react 
return (
<>
    <style>{`
        .animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;
        }

        .animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: blue;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .animated-text:hover::after {
            transform: scaleX(1);
        }
    `}
</style>

    <p class="animated-text">Hover over this text to animate the underline.</p>

</>
)
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */
/* target the siblings of the first span in .navbar-brand */
.navbar-brand span + span {
	margin-left: 5px;
	/* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */
	letter-spacing: -0.52em;
	/* make it disappear */
	opacity: 0;
	/* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */
	/* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/
	transition: all 0.3s ease-out;
}

.navbar-brand:hover span + span {
	/* on hover, we spread the letters out again */
	/* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */
	letter-spacing: 0.1em;
	/* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/
	opacity: 1;
}
element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);
}
img {
	transition: all ease 500ms;
}

img:hover {
	transform: scale(1.25);
	opacity: 0.7;
}
//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> 
star

Fri Oct 20 2023 05:07:23 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/5xFxuQCFkW

#css #frontend #styling #tailwindcss
star

Thu Oct 12 2023 15:29:47 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/cSpMlF5BQj

#css #react.js #frontend #styling #tailwindcss
star

Thu Oct 12 2023 15:29:39 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/cSpMlF5BQj

#css #react.js #frontend #styling #tailwindcss
star

Wed Oct 11 2023 06:40:11 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/x7vMjleR9z

#css #react.js #frontend #styling #tailwindcss
star

Sun Oct 08 2023 15:39:33 GMT+0000 (Coordinated Universal Time)

#css #react.js #frontend #styling
star

Tue Nov 16 2021 08:30:41 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css #reset #styling
star

Wed Jun 23 2021 06:04:02 GMT+0000 (Coordinated Universal Time)

#css #styling
star

Wed Jun 23 2021 06:02:59 GMT+0000 (Coordinated Universal Time)

#css #styling
star

Wed Jun 23 2021 06:00:38 GMT+0000 (Coordinated Universal Time)

#css #styling #transform #transition
star

Wed Jun 23 2021 04:31:38 GMT+0000 (Coordinated Universal Time)

#css #styling #fonts

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension