JSFiddle - React, Tailwind, and code Playground

by Oksana Pasichnyk

HTML

<html>
  <head>
    <title>Загадковий Лист</title>
    <link rel="stylesheet" href="style.css">
    <script src="prefixfree.js"></script>
  </head>
  
  <body>
    
    <p>
      <span class="newspaper">Замініть</span> 
      <span class="">ці</span> 
      <span class="">слова</span> 
      <span class="">своїм</span> 
      <span class="">власним</span> 
      <span class="">загадковим</span> 
      <span class="">повідомленням</span> 
      <span class="">.</span> 
      <span class="">Воно</span> 
      <span class="">може</span> 
      <span class="">складатися</span>
      <span class="">з</span>
      <span class="">12-ти</span> 
      <span class="">загадкових</span> 
      <span class="">слів</span> 
      <span class="">.</span>
    </p>
    
  </body>
  
</html>

CSS

span
{
	display: inline-block; 
	margin: 8px; 
	box-shadow: 1px 2px 2px grey; 
}

body {
  background-color: white;
	padding: 30px;
	max-width: 350px;
	margin: auto;
}

.newspaper {
	background-color: antiquewhite;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
}

.magazine1  {
  background-color: teal;
  color:white;
  font-family: Verdana;
	font-weight: 900;
	text-transform: uppercase; 
}

.magazine2 {
	background-image: url('pink-pattern.png');
  color: fuchsia;
  font-family: Verdana;
	font-weight: 900;
}

.medium {
	font-size: 20px;
	padding: 8px;
}

.big {
	font-size: 30px;
	padding: 10px;
}

.reallybig {
	font-size: 40px;
	padding: 15px;
}

.rotateleft {
	transform: rotate(-5deg);
}

.rotateright {
	transform: rotate(5deg);
}

.skewleft {
	transform: skewX(10deg);
}

.skewright {
	transform: skewX(-10deg);
}