JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="global-nav">
	<div id="masthead">
		<div id="masthead-grad">
			<div id="masthead-logo">
				<img src="https://test.brightideatest.com/uploads/biwsrv01/OD2024/899A4F23.png">
			</div>	
		</div>
	</div>
	<div id="bar">
		<div id="bar-content">
			<div id="bar-logo">
				<a href="">
					<img src="https://test.brightideatest.com/uploads/biwsrv01/OD2024/11969647.png" border="0">
				</a>
			</div>
			<div id="notifications">

<!--Action Items Notifictions-->
				<div class="action-items">
					<a href="" id="action-items-button"></a>
					<div id="ai-dropdown">
						<div id="dropdown-nub" class="ai"></div>
						<div id="ai-header">
							<span>Action Items</span>
						</div>
						<div id="ai-body">

							<div id="ai-container">
								<div id="ai-type-img">
									<img src="https://sandbox.brightideasandbox.com/core/images/to-do-action-item_24x24.png " border="0">
								</div>
								<div id="ai-desc"> You have been assigned a To Do action item for project "<b>Legal Project</b>" </div>
								<div id="ai-info-wrapper">
									<div id="ai-info">Name of To Do</div>
									<div id="ai-date">2 minutes ago</div>
								</div>
							</div>

							<div id="ai-container">
								<div id="ai-type-img">
									<img src="https://test.brightideatest.com/core/images/icon_action_item_evaluation_24x24.png" border="0">
								</div>
								<div id="ai-desc">You have been assigned a Scorecard action item for "<b>Legal Scorecard Evaluation</b>"</div>
								<div id="ai-info-wrapper">
									<div id="ai-info">Legal Batch - Round 2</div>
									<div id="ai-date">2 days ago</div>
								</div>
							</div>

							<div id="ai-container">
								<div id="ai-type-img">
									<img src="https://sandbox.brightideasandbox.com/core/images/icon_action_item_proposal_24x24.png" border="0">
								</div>
								<div id="ai-desc"> You have been assigned a Proposal action item for "<b>Legal Proposal</b>"</div>
								<div...

CSS

.content {margin-top: 100px;}
#global-nav {position: fixed; height: 100px; width: 100%; left: 0; right: 0; top: 0; z-index: 1000;}
#masthead {
height: 60px;
width: 100%;
background: #0072bc;
}

#masthead-grad {
height: 100%;
width: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.44))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#70000000',GradientType=0 ); /* IE6-9 */
}
#masthead-logo {min-width: 950px; width:950px; height: 100%; margin: 0px auto;}
#masthead-logo img {padding: 15px 0px; height: 30px;}

#bar {
height: 40px;
width: 100%;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 2%, rgba(245,245,245,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(245,245,245,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(245,245,245,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(245,245,245,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 2%,rgba(245,245,245,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',...