JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<h1>Coaches</h1>
<p>The CMC has many people available to answer your questions one to one. You can make an appointment or stop in to see a coach listed below.</p>
 
<h2>Staff</h2>
<ul class="staff-list">
    <li>
        <h3>Pam Brown</h3>
        <img src="http://placehold.it/150x165" alt="Portrait of Pam Brown" title="Pam Brown" />
        <dl>
            <dt>Career Goal</dt>
            <dd>To always be learning and teaching. I will never do a job where I am not helping others. It sounds altruistic but it’s truly the most selfish thing in the world. There is no better moment than knowing you helped someone create happiness in their life!</dd>
            <dt>Previous Work Experience</dt>
            <dd>Retail both corporate and store side, adjunct professor, management consultant, career advisor, Associate Director and Director working with BBAs and MBAs.</dd>
            <dt>Best Advice for a Junior</dt>
            <dd>Try everything! An internship can be very useful for showing what you DON’T want to do! USE THE SENIORS – they know more than you think and have done exactly what you want to do more recently than anyone on this earth!</dd>
            <dt>Best Advice for a Senior</dt>
            <dd>You can and will make some bad decisions about your career at some point. If you make one when leaving college, well, you just got one out of the way! J The only truly bad decision you can make is not using every resource available to you (CMC, alumni, program office, eagle ops, fellow students, MBAs, clubs) to get all the information you can to make the best educated guess about what career to pursue! Let us help you – it’s what we love to do!</dd>
        </dl>
    </li>
    <li>
        <h3>Anne Kocurek</h3>
        <img src="http://placehold.it/150x165" alt="Portrait of Anne Kocurek" title="Anne Kocurek" />
        <dl>
            <dt>Career Goal</dt>
            <dd>To use my communication and creativity skills to create career eye openings for students...

CSS

.staff-list {
    padding-left: 0;
    
    list-style: none;    
}
.staff-list li {
    margin-top: 3em;
}
.staff-list li:first-child {
    margin-top: 0;
}
.staff-list img {
    float: right;
    margin-left: 0.75em;
    margin-bottom: 0.75em;
    padding: 0.5em;
    
    border: 1px solid #EEE;
}
.staff-list dt {
    margin-top: 1em;
    
    font-weight: bold;
}
.staff-list dd {
    margin: 0;
    padding: 0;
}