JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<p>in the spotlight</p>
<div class="profile" id="profile-one">
    <img src="http://www.dsm-design.co.uk/Sites/DSM/library/images/Portfolio%20thumb-DSM-Profile-Barry-1.jpg" style="width:300px; height:300px;" alt="" />
     <h2>Barry Moore</h2>

     <h3>Who?</h3>

    <p>Hello, I’m Barry Moore, Managing Director.</p>
     <h3>What?</h3>

    <p>I founded the company in 1986 and not only run the creative design studio but am also a key member of the production team. Although I do find my time taken with paperwork and helping clients get quotes on time</p>
     <h3>Where?</h3>

    <p>Outside of work I enjoy a good game of golf followed by a pint at the 19th hole.</p>
</div>
<div class="profile" id="profile-two">
    <img src="http://www.dsm-design.co.uk/Sites/DSM/library/images/Portfolio%20thumb-DSM-Profile-Craig-1.jpg" style="width:300px; height:300px;" alt="" />
     <h2>Barry Moore</h2>

     <h3>Who?</h3>

    <p>Hello, I’m Barry Moore, Managing Director.</p>
     <h3>What?</h3>

    <p>I founded the company in 1986 and not only run the creative design studio but am also a key member of the production team. Although I do find my time taken with paperwork and helping clients get quotes on time</p>
     <h3>Where?</h3>

    <p>Outside of work I enjoy a good game of golf followed by a pint at the 19th hole.</p>
</div>
<div class="profile" id="profile-three">
    <img src="http://www.dsm-design.co.uk/Sites/DSM/library/images/Portfolio%20thumb-DSM-Profile-Barry-1.jpg" style="width:300px; height:300px;" alt="" />
     <h2>Barry Moore</h2>

     <h3>Who?</h3>

    <p>Hello, I’m Barry Moore, Managing Director.</p>
     <h3>What?</h3>

    <p>I founded the company in 1986 and not only run the creative design studio but am also a key member of the production team. Although I do find my time taken with paperwork and helping clients get quotes on time</p>
     <h3>Where?</h3>

    <p>Outside of work I enjoy a good game of golf followed by a pint at the 19th...

CSS

.profile img {
    float:left;
    padding-right:16px;
}
.profiles-list li img {
    float:left;
}
.profile h3 {
    font-size:14px;
}
.profile .clear {
    clear:both;
}
.profiles-list {
    padding:0;
}
.profiles-list li {
    display:block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.profile {
    display:none;
}
.active {
    display:block!important;
}

JavaScript

jQuery(document).ready(function () {
     jQuery("#profile-one").addClass('active');
     jQuery("#profile-button-one").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-one").addClass('active');
     });
     jQuery("#profile-button-two").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-two").addClass('active');
     });
     jQuery("#profile-button-three").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-three").addClass('active');
     });
          jQuery("#profile-button-four").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-four").addClass('active');
     });
     jQuery("#profile-button-five").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-five").addClass('active');
     });
     jQuery("#profile-button-six").click(function () {
         jQuery(".profile").removeClass('active');
         jQuery("#profile-six").addClass('active');
     });
 });