JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="header">

<span class="name">Joe Bloggs</span> <span class="role"><span>Team leader</span> <span>& Project Manager</span></span>

</div>

CSS

body {margin:0;font-family:Arial;font-size:10px;color:#222222;background-color:#f2f2f2;}

.header {background-color:#ffffff;padding-left:3em;border:solid #eeeeee;border-width:0 0 1px 0;}
.name {font-size:2.4em;font-weight:bold;line-height:5em;}

.role {font-size:1.8em;text-transform:uppercase;}
.role::before {margin:0 0.5em;content:"/";}

.role span {display:inline-block;}


@media screen and (max-width:600px) {
.header {line-height:2em;padding:0 0 1em 0;}
.name {line-height:2em;}
.name, .role {display:block;text-align:center;}
.role::before {margin:0;content:"";}
}