JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class="container">

  <div class="Word" id="word1">
    <div class="tekst" id="tekst1">
      <p>Cat</p>
    </div>
  </div>
  <div class="Word" id="word2">
    <div class="tekst" id="tekst2">
      <p>spoon</p>
    </div>
  </div>
  <div class="Word" id="word3">
    <div class="tekst" id="tekst3">
      <p>meal</p>
    </div>
  </div>
  <div class="Word" id="word4">
    <div class="tekst" id="tekst4">
      <p>passport</p>
    </div>
  </div>
  <div class="Word" id="word5">
    <div class="tekst" id="tekst5">
      <p>egg</p>
    </div>
  </div>
  <div class="Word" id="word6">
    <div class="tekst" id="tekst6">
      <p>beak</p>
    </div>
  </div>
  <div class="Word" id="word7">
    <div class="tekst" id="tekst7">
      <p>tea</p>
    </div>
  </div>
  <div class="Word" id="word8">
    <div class="tekst" id="tekst8">
      <p>milk</p>
    </div>
  </div>

CSS

body,
html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}

.container {
  width: 100%;
  height: 90%;
}

.Word, .Word .tekst, .Word p {
  display:inline;
}