JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<doctype HTML>

<html>

<head>

    <title> Scrolling Divs </title>

    <link rel="stylesheet" type="text/css" href="main.css">

</head>


<body>

<figure class="slider">

        <div id="boxA" class="box">

            <div id="boxA-pic" class="col-1">

                <img src="red.jpeg" alt="Red">

            </div>

            <div id="boxA-info" class="col-2">

                <h1> TEXT </h1>

                <p>
                        On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. Offending she contained mrs led listening resembled. Delicate marianne absolute men dashwood landlord and offended. Suppose cottage between and way. Minuter him own clothes but observe country. Agreement far boy otherwise rapturous incommode favourite. 

                        Be at miss or each good play home they. It leave taste mr in it fancy. She son lose does fond bred gave lady get. Sir her company conduct expense bed any. Sister depend change off piqued one. Contented continued any happiness instantly objection yet her allowance. Use correct day new brought tedious. By come this been in. Kept easy or sons my it done. 
                        
                        It prepare is ye nothing blushes up brought. Or as gravity pasture limited evening on. Wicket around beauty say she. Frankness resembled say not new smallness you discovery. Noisier ferrars yet shyness weather ten colonel. Too him himself engaged husband pursuit musical. Man age but him determine consisted therefore. Dinner to beyond regret wished an branch he. Remain bed but expect suffer little repair. 
                        
                        Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated. On no applauded exquisite my additions....

CSS

.slider {
    top: 250px;
    width: 400%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: normal;
    white-space: nowrap;
    max-height: 80%;
}

::-webkit-scrollbar {
    color: rebeccapurple;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
    border-radius: 10px;

}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    height: 30px;
    width: 8px;
    border: 1px solid black;
    background: rgb(111,111,111);
    -webkit-box-shadow: 0 1px 1px rgb(0,0,0);
    background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}

::-webkit-scrollbar-track-piece {
    height: 30px;
}

.box {
    display: inline-block;
    white-space: nowrap;
    margin: 3% 0% 0 3%;
    width: 20%;
    height: 450px;
    border: 1px solid white;
}

.box:hover {
    box-shadow: 4px 4px 14px 14px darkred;
    border-radius: 2px;
}

.col-1 {max-width: 100%; max-height: 45%; background-color: purple;}
.col-2 {width: 100%; height: 55%; background-color: purple;}

#boxA-pic {
    max-height: 40%;
    max-width: 100%;
    object-fit: cover;
}

#boxA-info {
    overflow-y: scroll;
}

#boxA-info h1 {
    text-align: center;
    color: white;
}

#boxA-info p {
    white-space: normal;
}

#boxB-pic {
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxB-info {
    overflow-y: scroll;
}

#boxB-info h1 {
    text-align: center;
    color: white;
}

#boxB-info p {
    white-space: normal;
}

#boxC-pic img{
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxC-info {
    overflow-y: scroll;
}

#boxC-info h1 {
    text-align: center;
    color: white;
}

#boxC-info p {
    white-space: normal;
}

#boxD-pic img {
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxD-info {
    overflow-y: scroll;
}

#boxD-info h1 {
    text-align: center;
    color: white;
}

#boxD-info p {
    white-space: normal;