JSFiddle - React, Tailwind, and code Playground

by MY Sun

HTML

<p class="p">Test</p>

CSS

.p {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,1+62,0.7+68,0+100;Blue+to+Transparent+Sharp */
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(89, 148, 202, 1) 62%, rgba(95, 154, 207, 0.7) 68%, rgba(125, 185, 232, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(89, 148, 202, 1) 62%, rgba(95, 154, 207, 0.7) 68%, rgba(125, 185, 232, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(89, 148, 202, 1) 62%, rgba(95, 154, 207, 0.7) 68%, rgba(125, 185, 232, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8', GradientType=0 ); /* IE6-9 */

  margin: 0;
  padding: 0;
  font-size: 100vh;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}


html, body {
  /* Altered from https://online-free-tools.com/en/css_pattern_generator_background  */
  background-color: #fff;
  background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%), linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%);
  background-size: 10vmin 10vmin;
  background-position: 0 0, 5vmin 5vmin;
}