JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="border">čištění</div>

CSS

/* caching CSS custom properties in the :root element,
   for use throughout the page, and allowing for easy
   theming: */
:root {
  --color-primary: #fff;
}

/* a simple reset to remove default padding and margins
   and to force the browser to use the same border-box
   sizing algorithm for all elements and the listed
   pseudo-elements: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.border {
  /* defining the '--size' property on the .border element: */
  --size: 0.3em;
  /* defining the repeating-linear-gradient as a custom property,
     as it will be used twice; here we specify the gradient should
     be at a 90 degree angle (on the horizontal axis),
     should start with the currentColor (the assigned color of the
     element), and cover a distance from 0 to the result of multiplying
     the --size by 2, then the gradient will take a transparent color
     from the distance of --size * 2 to the distance of --size by 3.
     This is in order to have the gradient scale along with the font-
     size: */
  --gradient: repeating-linear-gradient(90deg, currentColor 0 calc(2 * var(--size)), transparent calc(2 * var(--size)) calc(3 * var(--size)));
  /* setting the background-color: */
  background-color: darkgreen;
  /* assigning the background-images: */
  background-image: var(--gradient), var(--gradient);
  /* we don't need to repeat the gradient (although 'repeat-x' would
     have the same result): */
  background-repeat: no-repeat;
  /* here we assign the first background-image to be positioned at 0 (x-axis)
     and --size (y-axis) from the top-left corner, and the second to be
     positioned at 0 (x-axis) and the result of 100% - the --size property
     to inset the background-image from the lower edge of the element: */
  background-position: 0 var(--size), 0 calc(100% - var(--size));
  /* the background-size is 100% in the x-axis and half of the --size
     custom-property on the y-axis: */
  background-size:...