JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="splash">
<div class="splash_item">
<div>
<h1>Splash title goes here</h1>
<h2>First bullet point here</h2>
<h2>Second point goes here</h2>
<h2><span>Third highlighted point at the bottom!</span></h2>
</div>
</div>
</div>

CSS

:root {
--name: #DEAA39;
--name2: 1000px;
}

body {margin:0;}

.splash {color:#ffffff;height:520px;background:url('');background-position:center center;background-color:#999999;}
.splash h2 {font-weight:normal;font-size:22px;line-height:26px;position:relative;margin:0;padding:9px 0 9px 1em;}
.splash h2::before {content: "\203A";font-size:44px;line-height:44px;height:44px;position:absolute;top:-4px;left:0;}
.splash span {color:yellow;}
.splash_item {box-sizing: border-box;max-width:1100px;height:100%;margin:auto;padding:20px;display: flex;
  justify-content: flex-start;
  align-items: center;}