JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container feedback-modal">
  <div class="row">
    <div class="col-md-6 feedback-articles">
      <h3>Helpful Articles <div class="feedback-modal-diamond-container"><p class="feedback-modal-diamond"></p></div></h3>
      <ul>
        <li><a href="#">How to login</a></li>
        <li><a href="#">How to reset your password</a></li>
        <li><a href="#">How to take training</a></li>
        <li><a href="#">What are the minimum technical requirements?</a></li>
        <li><a href="#">How to clear your cache</a></li>
      </ul>
      <h3>Helpful Videos <div class="feedback-modal-diamond-container-2"><p class="feedback-modal-diamond"></p></h3>
      <ul>
        <li><a href="#">How to login</a></li>
        <li><a href="#">How to reset your password</a></li>
        <li><a href="#">How to take training</a></li>
        <li><a href="#">What are the minimum technical requirements?</a></li>
        <li><a href="#">How to clear your cache</a></li>
      </ul>
      <h3>Idea Exchange <div class="feedback-modal-diamond-container-3"><p class="feedback-modal-diamond"></p></h3>
      <ul>
        <li><a href="#">How to login</a></li>
        <li><a href="#">How to reset your password</a></li>
        <li><a href="#">How to take training</a></li>
        <li><a href="#">What are the minimum technical requirements?</a></li>
        <li><a href="#">How to clear your cache</a></li>
      </ul>
    </div>

    <div class="col-md-6 feedback-form">
      <h3>Contact SafetySkills Customer Care</h3>
      <div class="feedback-form-container">
        <div class="form-group">

          <label>Your Full Name*</label>
          <input class="form-control" type="text" placeholder="John Smith">
        </div>
        <div class="row">
          <div class="col-md-6">
            <div...

CSS

body {
  padding-top: 2em;
}

.feedback-modal {}

.feedback-modal > .row > .col-md-6 {
  margin-right: 0;
  padding-right: 0;
}

.feedback-articles {}

.feedback-articles h3 {
  font-size: 1.2em;
  margin: 0;
  padding: 0.3em;
  background: #a5a5a5;
  color: #fff;
}

.feedback-articles ul li {
  list-style: none;
  padding: 0.5em;
}

.feedback-form {
  padding-left: 0;
  background: #a5a5a5;
  color: #fff;
}

.feedback-form-container {
  padding: 1em;
}

.feedback-form > h3 {
  margin: 0;
  padding: 0;
  padding-left: 1em;
  background: #e2261c;
  color: #fff;
}

.btn-feedback-cancel {
  padding-right: 1em;
}

.feedback-modal-submit-group {
  text-align: right;
  padding: 1em 0;
}

.feedback-modal-diamond-container {
  position: absolute;
  top: 208px;
  right: -14px;
  z-index: 2;
}

.feedback-modal-diamond-container-2 {
  position: absolute;
  top: 416px;
  right: -14px;
  z-index: 2;
}

.feedback-modal-diamond-container-3 {
  position: absolute;
  top: 0px;
  right: -14px;
  z-index: 2;
}

.feedback-modal-diamond {
  border: 14px solid transparent;
  border-bottom-color: #d2d2d2;
  width: 0;
  height: 0;
  position: relative;
  top: -14px;
}

.feedback-modal-diamond:after {
  border: 14px solid transparent;
  border-top-color: #d2d2d2;
  content: '';
  position: absolute;
  right: -14px;
  top: 14px;
  width: 0;
  height: 0;
}

JavaScript

//e2261c - red