JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="main-container">
  <div id="cboxContent" style="float: left; width: 540px; height: 640px;">
    <div id="cboxLoadedContent" style="overflow: hidden; width: 540px; height: 640px;">
      <div id="report-container">
        <div data-reactroot="">
          <h2>Report comment</h2>
          <div class="RadioBox"><label class="RadioBox-item"><input type="radio" disabled="" class="RadioBox-radio" name="reportpost">
              <div class="RadioBox-checkbox">&nbsp;</div>
              <div>
                <div class="RadioBox-title">
                  <!-- react-text: 9 -->Mature
                  <!-- /react-text -->
                  <!-- react-text: 10 -->
                  <!-- /react-text --><span class="RadioBox-warning">(This comment is already marked as mature)</span></div>
                <div class="RadioBox-description">
                  <div>
                    <!-- react-text: 14 -->If you don't want to see mature content on Imgur, please change your
                    <!-- /react-text --><a href="/account/settings">safety settings</a><!-- react-text: 16 -->.
                    <!-- /react-text -->
                  </div>
                </div>
              </div>
            </label><label class="RadioBox-item"><input type="radio" class="RadioBox-radio" name="reportpost">
              <div class="RadioBox-checkbox">&nbsp;</div>
              <div>
                <div class="RadioBox-title">
                  <!-- react-text: 22 -->Sexually Explicit
                  <!-- /react-text -->
                  <!-- react-text: 23 -->
                  <!-- /react-text --><span class="RadioBox-warning"></span></div>
                <div class="RadioBox-description">This comment contains pornography, full or partial nudity.</div>
              </div>
            </label><label class="RadioBox-item"><input type="radio" class="RadioBox-radio" name="reportpost">
              <div class="RadioBox-checkbox">&nbsp;</div>
              <div>
      ...

CSS

body {
  background: #020202;
  font-family: 'Open Sans', sans-serif;
}

#main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4em;
}

#new-report-container {
  width: 540px;
}

.new-report-textarea {
  width: 100%;
  min-height: 5em;
}

/* IMGUR STYLES 
------------------------------------------------------*/
#new-report-container,
#report-container {
  background: #45484F;
  padding: 28px;
  border-radius: 5px;
}

.RadioBox {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.RadioBox-item {
  display: flex;
  flex-direction: row;
  width: 455px;
  margin: 0 0 20px;
  cursor: pointer;
}

#report-container .report-footer {
  margin: 10px 0 0;
  padding: 25px 0 0;
  border: 0 solid #979797;
  border-top-width: 1px;
}

#report-container .community_rules {
  display: inline-block;
  width: 175px;
  line-height: 150%;
  font-size: 12px;
  padding: 0;
}

.RadioBox-radio {
  width: 0;
  height: 0;
  opacity: 0;
}

.RadioBox-checkbox {
  min-width: 60px;
  padding: 0 20px 0 0;
  min-height: 35px;
  display: flex;
  justify-content: center;
}

.RadioBox-title {
  font-weight: 700;
  margin: 0 0 5px;
}

.RadioBox-description {
  line-height: 145%;
}

.RadioBox-warning {
  color: #f14768;
}

.RadioBox-checkbox {
  min-width: 60px;
  padding: 0 20px 0 0;
  min-height: 35px;
  display: flex;
  justify-content: center;
}

.button-css,
.pointer,
.tab,
input[type=checkbox],
input[type=radio],
label {
  cursor: pointer;
}

.RadioBox-radio {
  width: 0;
  height: 0;
  opacity: 0;
}

input[type="radio"i] {
  background-color: initial;
  cursor: default;
  -webkit-appearance: radio;
  box-sizing: border-box;
  margin: 3px 3px 0px 5px;
  padding: initial;
  border: initial;
}

input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
 ...

JavaScript

const titleText = document.querySelector('#new-report-title');
const descriptionText = document.querySelector('#new-report-description');

const newTitleText = document.querySelector('#new-report-title-text');
const newDescriptionText = document.querySelector('#new-report-description-text');

newTitleText.addEventListener('input', () => {
  titleText.innerHTML = newTitleText.value;
});

newDescriptionText.addEventListener('input', () => {
  descriptionText.innerHTML = newDescriptionText.value;
});