Skip to content

Instantly share code, notes, and snippets.

@w3collective
w3collective / tailwind-login-form.html
Last active January 20, 2021 04:24
Login form with Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tailwind CSS Login Form</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
</head>
<body class="flex h-screen bg-indigo-700">
<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">
@w3collective
w3collective / mouse-scroll-icon-css.html
Last active February 4, 2021 04:57
Animated scrolling mouse icon with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated mouse scroll icon with CSS</title>
<style>
html {
height: 100%;
}
body {
@w3collective
w3collective / cookie-track-returning-visitor.html
Created February 5, 2021 05:10
Using a cookie to track returning website visitors
@w3collective
w3collective / pricing-table-flexbox.html
Created February 10, 2021 07:04
3 column pricing table layout with CSS flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>3 column pricing table layout with CSS flexbox</title>
<style>
body {
background-color: #181b1d;
font-family: sans-serif;
}
@w3collective
w3collective / dynamic-favicon.js
Last active February 10, 2021 07:06
Change a website favicon dynamically using JavaScript
const [month, day] = new Date().toLocaleDateString("en-US").split("/");
let favicon;
switch (month + day) {
case "214":
favicon = "💕";
break;
case "1031":
favicon = "🎃";
break;
@w3collective
w3collective / html-form-validation.html
Created February 18, 2021 04:47
Client side HTML form validation without JavaScript
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML Form Validation</title>
<style>
body {
font-family: sans-serif;
}
legend {
@w3collective
w3collective / css-profile-images.html
Created February 20, 2021 00:47
Ways to use CSS to enhance user profile images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>5 Stylish ways to use CSS to enhance user profile images</title>
<style>
html {
height: 100%;
}
body {
@w3collective
w3collective / flip-card-css.html
Created March 5, 2021 04:12
Animated flip card using CSS 3D transforms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated flip card with CSS 3D transforms</title>
<style>
body {
padding: 30px;
background-color: lightyellow;
@w3collective
w3collective / html-css-tooltip.html
Last active April 13, 2021 00:15
HTML tooltip on hover using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip</title>
<style>
body {
padding: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"