JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">

  <div class="col-lg-12">
    <div class="panel">
      <div>
        <div class="featured fa"></div>
      </div>
      <h3 class="panel-title wiz active">My Settings

      </h3>
      <div class="panel-body">
        <select id="demo-select2" class="demo_select2 form-control">
                        <option value="Opt1">Opt1</option>
                        <option value="Opt2">Opt2</option>
                        <option value="Opt3">Opt3</option>
                        <option value="Opt2">Opt4</option>
                    </select>

      </div>

    </div>
  </div>

CSS

.panel-title {
   background-color: #232323;
   text-transform: uppercase;
   font-family: 'Open Sans Condensed', sans-serif;
   color: #03a9f4;
   font-size: 1.5em;
   padding: 0 20px 0 60px;
 }

 .panel {
   background-color: transparent;
 }

 .featured.fa {
   /* width: 100px; */
   /* height: 100px; */
   /* display: block; */
   position: absolute;
   top: -12px;
   /* right: 0; */
   left: 38px;
 }

 .featured.fa::before {
   position: absolute;
   right: 0%;
   top: 0;
   margin: .25em;
   color: gold;
   z-index: 2;
 }

 .featured::after {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   top: 0;
   right: 0;
   border-width: 20px;
   border-style: solid;
   border-color: #215165 transparent transparent #215165;
   z-index: 1;
 }