JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<h3>It should similiar to this:</h3>
<p><b>design </b><b><font class="font-m">and</font></b> technology<br /></p>
<p><b>history </b> humanities <font class="font-xs">social</font> sciences </p>
<p><b>sports </b> psychology</p>
<p>environmental <b><font class="font-m"> science </font></b></p>

<hr/>



<div id="word">
-
</div>

CSS

body{
   background-color: #1F2227;
   color: #eee;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
}

.font-xs{
    font-size: 90%;
}

.font-m{
    font-size: 110%;
}

JavaScript

const word = document.querySelector('#word');

var Cards = [{
    front: "<p><b>design<\/b> <b><font class=\"font-m\">and<\/font><\/b> technology<br \/><\/p>",
    front_plain: "design and technology",
    back: "<p><b>history<\/b> humanities <font class=\"font-xs\">social<\/font> sciences<\/p>",
    back_plain: "history humanities social sciences",
  }, {
    front: "<p><b>sports<\/b> psychology<\/p>",
    front_plain: "sports psychology",
    back: "<p>environmental<b><font class=\"font-m\"> science<\/font><\/b><\/p>",
    back_plain: "environmental science",
  }];
  
  word.innerText= Cards[0].front;