JSFiddle - React, Tailwind, and code Playground
by LuckyCat
HTML
<!-- up_5_2 -->
<div class="tokens_1">
75 Tokens
</div>
<!-- up_4 -->
<div class="tokens_2">
75 Tokens
</div>
<!-- up_5_777 -->
<!-- up_5_666 -->
<!-- up_5_555 -->
<div class="tokens_3">
75 Tokens
</div>
<!-- up_3 -->
<div class="tokens_4">
75 Tokens
</div>
<!-- up_3_7 -->
<div class="tokens_5">
75 Tokens
</div>
CSS
@import 'https://fonts.googleapis.com/css?family=Roboto';
body {
font-family: Roboto;
font-size: 72px;
color: #06c8ff;
background: #000;
}
.tokens_1 {
/* text-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>;
обяз. обяз. необяз.
*/
text-shadow:
3px 3px 8px rgba(0, 0, 0,.70),
0 0 54px rgba(0,210,255,.37), 0 0 54px rgba(0,210,255,.37),
1px 1px 0 #0092d6, -1px -1px 0 #0092d6, 1px -1px 0 #0092d6, -1px 1px 0 #0092d6
/*0 0 5px #d1f3ff, 0 0 10px #d1f3ff, 0 0 15px #d1f3ff,
0 0 20px #00a6e4, 0 0 35px #00a6e4, 0 0 40px #00a6e4, 0 0 50px #00a6e4, 0 0 75px #00a6e4*/
;
}
.tokens_2 {
color: #169c47;
text-shadow: 0 0 5px rgba(255,255,255,.88);
}
.tokens_3 {
color: #06c8ff;
text-shadow:
0 0 14px rgba(0,210,255,.37), 2px 3px 4px #000,
0 0 54px rgba(0,210,255,.37), 0 0 54px rgba(0,210,255,.37);
}
.tokens_4 {
color: #ff7300;
text-shadow:
0 0 5px rgba(250,245,193,.88), 0 0 5px rgba(250,245,193,.88);
}
.tokens_5 {
color: #df2935;
/*text-shadow:
0 0 5px rgba(250,245,193,.88), 0 0 5px rgba(250,245,193,.88);*/
text-shadow:
0 0 37px rgba(223,41,50,.37), 0 0 37px rgba(223,41,50,.37),
0 0 18px rgba(223,41,53,.37), 0 5px 5px rgba(0,0,0,.70),
1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}