JSFiddle - React, Tailwind, and code Playground

by Bradley Farquhar

HTML

<div class="profile">
	<div class="container-fluid">
		<div class="main-section row">
			<div>
		  	<% flash.each do |name, msg| %>
		      <%= content_tag(:div, msg, class: "alert alert-info") %>
		    <% end %>
			</div>

				<div class="content row">
					<div class="col-sm-8">
						<div class="username row">
							<h1><%= @ambassador.first_name.capitalize %> <%= @ambassador.last_name.capitalize %> </h1>
						</div> <!-- username -->
					<div class="details row">
						<div class="col-sm-6 location">
							<h4><i class="fa fa-map-marker"></i> <%= @ambassador.city %>, <%= @ambassador.state %></h4>
						</div>
					</div> <!-- details -->

					<div class="brief row">
						<ul id="myTab" class="nav nav-tabs">
						  <li role="presentation" class="active" id="section-tab"><a href="#photos" data-toggle="tab"><span class="glyphicon glyphicon-picture" aria-hidden="true"> Photos</span></a></li>
						  <li role="presentation" id="section-tab"><a href="#about" data-toggle="tab"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Event History</a></li>
						</ul>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane active" id="photos">
							<div class="col-md-12">
								<!-- carousel-->
								<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								  <!-- Wrapper for slides -->
								  <div class="carousel-inner">
					            <% @ambassador.images.each_with_index do |image, index| %>
					                <div class="item <%= 'active' if index == 0%>" data-slide-number="<%= index %>">
					                  <%= attachment_image_tag(image, :file, :fill, 600, 600, class: 'img-responsive') %>
					                </div>
					            <% end%>
					            </div>
							    	  <!-- Controls -->
									  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
									    <span class="glyphicon glyphicon-chevron-left"...

CSS

$green: #127f98;
$orange: #E67E22;
$brown: #984D10;
$blue: #31C4E5;
$normal-font: "Inconsolata", monospace, serif;
$heading-font: 'Nunito', Helvetica, Arial, sans-serif;

.home {
	.main-background {
		background: image-url("promo-model-slide.jpg") center center no-repeat;
	  height: 650px;
	 	width: 100%;
	  background-size: cover;
		.navbar {
			width: 95%;
			margin: 0 auto;
			a {
				color: white;
			}
			.navbar-header {
				.navbar-toggle .icon-bar {
				  background-color: #fff;
				}
				.navbar-brand {
					font-size: 200%;
					color: white;
				}
			}
			.navbar-right {
			  padding-top: 7px;
			  font-size: 0.85em;
			  li {
				  padding: 0 5px;
				  color: #111;
				}
			}
			.nav>li>a {
			  background-color: transparent !important;
			  color: white;
			}
			.nav>li>ul>li>a {
				color: #111;
			}
			.dropdown-menu {
			  background-color: #F3F3F3;
			  font-size: 12px;
			  line-height: 10px;
			  padding: 0;
			  margin: 0;
			  position: absolute;
			  .divider {
				  margin: 0;
				  height: 3px;
				}
			}
			#dropdown-option a {
			  height: 50px;
			  padding-top: 15px;
			  &:hover, :focus, :active {
			    background-color: rgb(22, 160, 133);
			    color: #fff;
			  }
			}
			#ambassador-btn {
			  background-color: rgb( 230, 126, 34);
			  color: #fff;
			  border: none;
			  padding: 8px 20px;
			  border-radius: 2px;
			  margin-top: 5px;
			  &:hover, :focus, :active {
			    opacity: 0.9;
			  }
			}
		}
		.homepage-header {
			padding-top: 200px;
			text-align: center;
			.title {
				text-align: center;
				margin: 0 auto;
				max-width: 60%;
				background-color: rgba(50, 50, 50, 0.5);
				border-top: 3px solid white;
				h1 {
					text-align: center;
					text-transform: uppercase;
					letter-spacing: 1px;
					color: #fff;
					margin-bottom: 0px;
					padding-bottom: 10px;
					font-size: 3.5em;
					font-weight: 400;
					font-family: 'Nunito', Helvetica, Arial, sans-serif;
				}
			}
			.subheader {
				text-align:...