JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div class="wp-block-cover has-background-dim-80 has-background-dim has-parallax pt-5 pb-5" style="background-image:url(https://www.nghs.com/wp-content/uploads/2021/08/ghi-brand-flourish-002.png);background-color:#1b1c1d;min-height:100vh"><div class="wp-block-cover__inner-container">
<div class="wp-block-group container pt-5 pb-5"><div class="wp-block-group__inner-container">
<p class="text-uppercase interstate text-muted">Connect Your Care With</p>



<h2 class="has-text-align-left display-3 headline text-uppercase mt-0 has-white-color has-text-color">Focused Experience</h2>



<p class="has-text-align-left">Our program brings together distinguished cardiologists, cardiothoracic and vascular surgeons, patient navigators and program coordinators to overcome even the most advanced and complex conditions.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer d-none d-lg-block"></div>



<div class="wp-block-columns">
<div class="wp-block-column is-vertically-aligned-center">
<div class="wp-block-cover has-background-dim-70 has-background-dim has-parallax rounded-huge heart-block-cover-small p-4 shadow-lg" style="background-image:url(https://www.nghs.com/wp-content/uploads/2021/08/ghi-pattern-001.gif);background-color:#ca3018"><div class="wp-block-cover__inner-container">
<p class="has-text-align-left interstate text-uppercase d-block has-white-color has-text-color has-medium-font-size"><a href="/heart/noninvasive-cardiology/">Non-invasive Cardiology</a></p>
</div></div>
</div>



<div class="wp-block-column">
<div class="wp-block-cover has-background-dim-70 has-nghsgreen-background-color has-background-dim has-parallax rounded-huge heart-block-cover-small p-4 shadow-lg" style="background-image:url(https://www.nghs.com/wp-content/uploads/2021/08/ghi-pattern-001.gif)"><div class="wp-block-cover__inner-container">
<p class="has-text-align-left interstate text-uppercase...

CSS

@charset "UTF-8";#start-resizable-editor-section{display:none}.wp-block-audio{margin:0 0 1em}.wp-block-audio figcaption{margin-top:.5em;margin-bottom:1em}.wp-block-audio audio{width:100%;min-width:300px}.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;cursor:pointer;display:inline-block;font-size:1.125em;padding:calc(.667em + 2px) calc(1.333em + 2px);text-align:center;text-decoration:none;overflow-wrap:break-word;box-sizing:border-box}.wp-block-button__link:active,.wp-block-button__link:focus,.wp-block-button__link:hover,.wp-block-button__link:visited{color:#fff}.wp-block-button__link.aligncenter{text-align:center}.wp-block-button__link.alignright{text-align:right}.wp-block-buttons>.wp-block-button.has-custom-width{max-width:none}.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{width:100%}.wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100{width:calc(100% - .5em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100:only-child{margin-right:0;width:100%}@supports (column-gap:0.5em){.wp-block-buttons.is-content-justification-right>.wp-block-button.wp-block-button,.wp-block-buttons>.wp-block-button.wp-block-button{margin-right:0;margin-left:0}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - .375em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - .25em)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% -...