JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

&lt;style&gt;<br>
/*================ Mission Bar Styling Overwrite (short mission statement = larger font, less top padding) ================*/<br>
.MissionBar {<br>
    font-size: 18px;<br>
    padding-top: 6px;<br>
}<br>
&lt;/style&gt;<br>
&lt;div class="NenLogo"&gt;<br>
    &lt;img src="https://navy.deps.mil/peoeis/sites/nen/res/NEN-logo-v2-100x100.png" height="100" width="100"&gt;<br>
&lt;/div&gt;<br>
&lt;div class="MissionContainer"&gt;<br>
    &lt;div class="GradientOverlay"&gt;&lt;/div&gt;<br>
    &lt;div class="MissionBar"&gt;Business Relationship Management (BRM) establishes and maintains close relationships with IT customers and stakeholders. BRM also ensures that current and future customer requirements and stakeholder expectations for IT services are met or exceeded in a timely manner. &lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;div class="ClickToExpandMissionBanner"&gt;<br>
    &lt;img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19"&gt;<br>
&lt;/div&gt;<br>
&lt;div class="ClickToCloseMissionBanner"&gt;<br>
    &lt;img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19"&gt;<br>
&lt;/div&gt;

JavaScript

<style>
/*================ Mission Bar Styling Overwrite (short mission statement = larger font, less top padding) ================*/
.MissionBar {
    font-size: 18px;
    padding-top: 6px;
}
</style>
<div class="NenLogo">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/NEN-logo-v2-100x100.png" height="100" width="100">
</div>
<div class="MissionContainer">
    <div class="GradientOverlay"></div>
    <div class="MissionBar">Business Relationship Management (BRM) establishes and maintains close relationships with IT customers and stakeholders. BRM also ensures that current and future customer requirements and stakeholder expectations for IT services are met or exceeded in a timely manner. </div>
</div>
<div class="ClickToExpandMissionBanner">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19">
</div>
<div class="ClickToCloseMissionBanner">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19">
</div>