JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<div class="alert-component full-width" id="rmitAlertComponent"><div class="root"><p>RMIT is monitoring the coronavirus situation closely and taking advice from the relevant authorities. <a href="https://www.rmit.edu.au/news/alerts" data-analytics-type="alert" data-analytics-value="For latest updates read more here">For latest updates read more here</a>

</p></div>

</div>


<div class="quickfact-summary__htmlcontainer aem-Grid aem-Grid--12 aem-GridColumn--default--12">
<div class="quickfact-summary__title col-md-9 col-sm-12 col-xs-12">
<h2>RMIT is a global university of technology, design and enterprise</h2>
</div>
<div class="quickfact-summary__content col-md-12 col-sm-12 col-xs-12">

<!--
<div class="quickfact-summary__section col-md-4 col-sm-12 col-xs-12">
<div>
<span>1st</span>
<p>in Aviation in Australia</p>
</div>
</div>
-->
<div class="quickfact-summary__section col-md-4 col-sm-12 col-xs-12">
<div>
<span>Top 1%</span>
<p>of universities globally</p>
</div>
</div>
<div class="quickfact-summary__section col-md-4 col-sm-12 col-xs-12">
<div>
<span>11,500+</span>
<p>student placements with industry partners in 2019s</p>
</div>
</div>
<div class="quickfact-summary__section col-md-3 col-sm-12 col-xs-12">
<div>
<span>Ranked #1</span>
<p>Victorian university for student engagement</p>
</div>
</div>
</div>
</div>

CSS

.alert-component{padding: 16px 0;background:#50D2FF;color: #000000;

}.alert-component p {font-family: Arial;font-size: 16px;letter-spacing: 0;line-height: 24px;margin: 0;

}.alert-component a{color: #000000;text-decoration: underline;}.alert-component a:hover{color: #000054;text-decoration: underline;

}.alert-component a:focus{text-decoration: none;outline: 1px solid #000000;outline-offset: 1px;}

#rmitAlertComponent {display:none;}.top-nav {position: relative;}

.mob-nav-enabled .top-nav {position: static;}

</style>

<script>

let clone = document.querySelector('#rmitAlertComponent').cloneNode( true);

clone.setAttribute( 'id', 'alertComponent');

document.querySelector('.top-nav').parentElement.prepend( clone );

</script><style>
.quickfact-summary__htmlcontainer {
padding:32px 0 32px 0;
}
.quickfact-summary__htmlcontainer .quickfact-summary__title {
margin:0;
padding:0;
}
.quickfact-summary__htmlcontainer .quickfact-summary__title h2 {
color:#000054;
margin:0 0 24px 0;
padding:0;
font-family:"Museo500", serif;
font-size:38px;
letter-spacing:0;
line-height:40px;
}
.quickfact-summary__htmlcontainer .quickfact-summary__content {
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
width:100%;
}
.quickfact-summary__htmlcontainer .quickfact-summary__content .quickfact-summary__section {
display:flex;
margin:16px 22px 0 0;
padding:0 10px 0 32px;
border-left:1px solid #dfdfdf;
}
.quickfact-summary__htmlcontainer .quickfact-summary__content .quickfact-summary__section:nth-of-type(4n) {
margin:16px 0 0 0 !important;
}
.quickfact-summary__htmlcontainer .quickfact-summary__content .quickfact-summary__section span {
width:100%;
color:#e60028;
margin:0;
padding:0;
font-family:"Museo500", serif;
font-size:24px;
letter-spacing:0;
line-height:28px;
}
.quickfact-summary__htmlcontainer .quickfact-summary__content .quickfact-summary__section p {
width:100%;
margin:8px 0 0 0;
color:#3a3a3a;
font-family:"Arial",...