JSFiddle - React, Tailwind, and code Playground

by csornmo

SCSS

/*--------------------------------------------------------------------------------------------------------

# SITEVISIONS BOOTSTRAP

--------------------------------------------------------------------------------------------------------*/

.rog-main {

/* Breadcrumb */
.bootstrap .breadcrumb {
   background-color: #ffffff;
   border-radius: 0;
}
.sv-breadcrumb a, .sv-breadcrumb li {
   color: #5e4b8b;
}

/* iframe */
.sv-social-frame {
   border-radius: 0;
   border: 0;
   padding: 20px;
   background: #f2f2f2;
}

/* Dropdown */
.bootstrap .dropdown-menu {
   border-radius: 0;
   border-color: #ddd;
}

/* Popover */
.popover {
   border-radius: 0;
   border-color: #ddd;
   padding: 0;
}
.popover-title {
   background: #F3F1F6;
   border-radius: 0;
   font-weight: bold;
}

.dropdown-menu li > a {
   display: flex;
}

.dropdown-menu li > a > i {
   margin-right: 10px;
   top: 1px;
   position: relative;
}


/* Modal */
.modal-content {
   border-radius: 0;
}

.bootstrap .btn-group>.btn:first-child,
.bootstrap .btn-group>.btn:last-child, .bootstrap .btn-group>.dropdown-toggle {
   /* border-radius: 0; */
}

.bootstrap input, .bootstrap textarea {
   padding: 10px!important;
}
.bootstrap textarea {
   border-radius: 0!important;
}

.bootstrap input {
   height: 30px!important;
   line-height: 30px!important;
   margin-top: 0!important;
   padding: 20px 10px!important;
   border-radius: 0!important;
}

.bootstrap input[type="submit"].btn {
   min-width: 100px;
}

.bootstrap .form-horizontal .control-label {
   padding-top: 10px;
}

/* BOOTSTRAP CHECKBOX */
.bootstrap .checkbox {
   height: 30px!important;
   line-height: 30px;
}

.bootstrap label.checkbox input {
   background-image: url('/images/18.12f52dce16d20183c422ed01/1569242320212/icon-social-checkbox.svg');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}
.bootstrap label.checkbox input:checked {
   background-image:...