JSFiddle - React, Tailwind, and code Playground

by FelHa

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <div class="section-inside">
        <div class="service-box web-dev">

            <h4>Web Development</h4>
            <p>Build your brand new website from scratch, expertly tailored to the needs of your business. </p>
            <span>Find out more</span>
        </div>

        <div id="web-dev" class="popup-box">
            <h2>Web Development</h2>
            <p>
                Scuttle rigging scurvy cog lee nipper Letter of Marque transom Buccaneer Privateer. 
                Chain Shot ho Letter of Marque hornswaggle booty fathom jack bounty maroon Barbary Coast. 
                Nipperkin Barbary Coast measured fer yer chains blow the man down Letter of Marque 
                smartly splice the main brace furl parley starboard.
            </p>
            <span class="close">Close</span>
        </div>

        <div class="service-box cro">
       
            <h4>Conversion Rate Optimisation</h4>
            <p>Fine-tune your website to guide traffic in the right direction to help you deliver your goals.</p>
            <span>Find out more</span>
        </div>

        <div id="cro" class="popup-box">
            <h2>Conversion Rate Optimisation</h2>
            <p>
                Scuttle rigging scurvy cog lee nipper Letter of Marque transom Buccaneer Privateer. 
                Chain Shot ho Letter of Marque hornswaggle booty fathom jack bounty maroon Barbary Coast. 
                Nipperkin Barbary Coast measured fer yer chains blow the man down Letter of Marque 
                smartly splice the main brace furl parley starboard.
            </p>
            <span class="close">Close</span>
        </div>
        
        <div class="service-box analytics">
          
            <h4>Analytics</h4>
           ...

CSS

.popup-box {
  display: none;
}

JavaScript

/* POP UP BOXES */
const services = document.querySelectorAll('.service-box');
const popUps = document.querySelectorAll('.popup-box');
const closePopUps = document.querySelectorAll('.close');

services.forEach((service, index) => {
  service.addEventListener('click', () => {
    popUps[index].style.display = 'block';
  });
});

closePopUps.forEach((closePopUp, index) => {
  closePopUp.addEventListener('click', () => {
    popUps[index].style.display = 'none';
  });
});