JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<div id='staff_image' class='staff_image'>
     "rias"
     <img src="#"/>
 </div>
    <img id='staff_name' class='staff_name'></img>

JavaScript

function loadProfile(profile)
    {
        var staff_image = document.getElementById('staff_image');
        
        staff_image.src = imgPath + profile.img;

        var staff_name = document.getElementById('staff_name');
        staff_name.src = titlePath + profile.title;

        var staff_details = document.getElementById('staff_details');
        staff_details.innerHTML = profile.details;
    }

var imgPath = "../assets/images/staff_profile/staff/";
var titlePath = "../assets/images/staff_profile/titles/";

var profiles =
[
    //
    {
        img:"fin.jpg",
        title:"fin.png",
        details:"<p>Stunt pilot with the Red Arrows (UK airforce stunt team), has served in combat choppers in 3 recent wars, and fears nothing except small dogs and single women.</p>" +
                "<p>Owns an Extra EA-200 for the ultimate full stunt flight experience, and flies all our other fixed wing craft much more sedately when required. And, yes, that is his real name. He's Irish and he doesn't want to talk about it.</p>"
    },
    //
    {
        img:"hans.jpg",
        title:"hans.png",
        details:"<p>Hans has flown almost everything there is to fly. Hanshas has flown almost everything there is to fly. He first took the controls of a small plane at 12 years old, and flew solo when he was 14. After a few years flying anything anywhere he settled into a series of test pilot jobs but left that because he prefers company when hes in the air.</p>"
    },
    //
    {
        img:"john.jpg",
        title:"john.png",
        details:"<p>With over 10,000 hours piloting helicopters in the bush and mountains of the Southern Alps for deer recovery and mountain rescue operations, Doc is well qualified to land you and your friends in remote parts of the country that only he knows about. He ll help you plot your route, drop extra provisions where you want them, and pick you up when your done.</p>"
    },
    {
        img:"wendy.jpg",
        title:"wendy.png",
       ...