JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<div class="en">
  <ul class="translations">
    <li>I was walking in the park, when I heard my name called.</li>
  </ul>
</div>

CSS

:root {
  --russian-red-colour: #D16D43;
  --medium-grey-colour: #7e7e7e;
  --medium-grey-2-colour: #d9d9d9;
  /* used in collapsible */
  --light-grey-colour: #CECECE;
  --medium-blue-grey-coulour: #a5abb3;
  --dark-grey-colour: #6f6f6f;
  /* used in collapsible */
  --header-title-grey-colour: #727272;
  --sans-serif-font: "Futura", "Avenir Next", "Futura", arial, "PT Sans";
  --serif-font-list: "PT Serif Caption", Georgia, "PT Serif", "Times New Roman", serif;
  --standard-background-grey-colour: #EDEDED;
  --slate-green-colour: #516f76;

  /* https://www.htmlcsscolor.com/hex/A1B6B9 "Casper" */
  --casper-colour: #A1B6B9;
}

ul.translations>li {
  font-family: var(--sans-serif-font);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: var(--medium-grey-colour);
}

div.en {
  font-family: var(--sans-serif-font);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: var(--medium-grey-colour);
}

JavaScript

let ul = document.getElementsByClassName("translations")[0];
let licount = ul.children.length;
if (ul.children.length == 1) {
	// if there's only one item, we can unwrawp
    let licontent = ul.children[0].textContent;
    ul.parentNode.textContent = licontent;
}