JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<header>
  <h2>
   Siriously
  </h2>
</header>
<div class="container">
  <h1>
    "Hey Siri, what's the score?"
  </h1>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Submit an Idea</button>
  <div class='details'>
    <div class='stats'>
      <button>▲</button><br> 123
    </div>
    <div class='desc'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div style="clear:both"></div>
    <h4> <label class="form-label">Domain:</label> Sports
    </h4>
    <h4>
      <label class="form-label">Locale:</label> en_US, en_IN, en_GB
    </h4>
    <h4>
      <label class="form-label">Behavior Duration:</label> May 2019 to July 2019
    </h4>
   <h4>
      <a href="#">Wireframe-Sample.pdf ⬇</a>
    </h4>
  </div>
  <hr/>
  <h2>
  Comments
  </h2>
  <div class="comment">
  <div class="stats">
  <img...

CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR|Roboto');

.desc {
  width: calc(100% - 120px);
  display: inline-block;
  float: right;
  font-family: 'Noto Serif KR', sans-serif;
  margin-left: 10px;
}

.stats {
  display: inline-block;
  width: 100px;
  text-align: center;
  font-size: 26px;
}

.stats button {
  margin-bottom: 6px;
  font-size: 30px;
  border: none;
  cursor: pointer;
}

.stats img {
  max-width: 100px;
  margin-right: 20px;
  border: 1px solid #ccc;
}
* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
div{
padding: 10px;
}
h4 {
  display: inline-block;
  margin-right: 40px;
}
.form-label {
  font-weight: lighter;
}


/* Full-width input fields */
#id01 input[type=text], #id01 input[type=password], #id01 select, #id01 textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
#id01 button {
    padding: 14px 20px;
    margin: 8px 0;
    border: 1px solid #efefef;
    cursor: pointer;
    width: 100%;
}

#id01 button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
#id01 .cancelbtn {
    width: auto;
    padding: 10px 18px;
}

/* Center the image and position the close button */
#id01 .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

#id01 img.avatar {
    width: 40%;
    border-radius: 50%;
}

#id01 .container {
    padding: 16px;
}

#id01 span.psw {
    float: right;
    padding-top: 16px;
}

#id01 {
  left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
}
/* The Modal (background) */
#id01 .modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%; /* Full...

JavaScript

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}