JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<h1 class="neon blue">
    VACATION
</h1>
<h2 class="neon green">
    GETAWAY
</h2>

<h1 class="neon red-yellow">
    FIESTA
</h1>

<h1 class="neon purple-blue">
    FIESTA
</h1>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: #000000;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

h1 {
    font-family: "Arial", sans-serif;
    font-size: 100px;
    font-weight: bold;
}

h2 {
    font-family: "Cursive", cursive;
    font-size: 50px;
}

.blue {
    color: #e0f7fa; /* Light cyan */
    --color1: #80d8ff; /* Light blue */
    --color2: #40c4ff; /* Blue */
    --color3: #00b0ff; /* Dark blue */
    --color4: #0091ea; /* Deep blue */
    --color5: #0068a5; /* Darker blue */
}

.green {
    color: #b2fab4; /* Light green */
    --color1: #a5d6a7; /* Light green */
    --color2: #66bb6a; /* Green */
    --color3: #388e3c; /* Dark green */
    --color4: #00796b; /* Teal */
    --color5: #004d40; /* Darker teal */
}

.red-yellow {
    color: #fff3e0; /* Light cream */
    --color1: #ff8a80; /* Light red */
    --color2: #ff5252; /* Red */
    --color3: #d50000; /* Dark red */
    --color4: #ffcc80; /* Light yellow */
    --color5: #ffd600; /* Yellow */
}

.purple-blue {
    color: #e1bee7; /* Light purple */
    --color1: #ba68c8; /* Medium purple */
    --color2: #8e24aa; /* Dark purple */
    --color3: #6a1b9a; /* Darker purple */
    --color4: #64b5f6; /* Light blue */
    --color5: #1e88e5; /* Blue */
}

.neon {
    text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 30px var(--color3),
    0 0 40px var(--color4),
    0 0 60px var(--color5);
}