JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>

<head>
    <title>Amazon Books</title>
    <link href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/index.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/assets/favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.esm.js"
            type="module"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.js"></script>
</head>

<body>
<!--HTML content goes here-->
<main class="w-50 mx-auto mt-40 position-relative">
    <div class="carousel-container">
        <h1 class="accordion-title">Amazon Book Titles</h1>
        <div class="accordion" data-testid="1">
            <div class="title-section" role="button" tabindex="0" aria-controls="desc-1" id="btn-1">
                <div class="title">Responsive Web Design with HTML5 and CSS</div>
                <div class="expand-icon"></div>
                <div class="collapse-icon"></div>
            </div>
            <div class="description" id="desc-1" role="region" aria-labelledby="btn-1">
                Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between Key Features Understand what responsive web design is and its significance for modern web development Explore the latest developments in responsive web design including variable fonts, CSS Scroll Snap, and more Get to grips with the uses and benefits of the new CSS Grid layout Book Description Responsive Web Design with HTML5 and CSS, Third Edition is a renewed and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS tools and techniques for responsive web design.            
            </div>
        </div>

        <div class="accordion" data-testid="2">
           ...

CSS

/* Add your css styles here */

.multi-select {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
}

.accordion-title {
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
    font-size: 1.5em;
    color: darkgray;
}

.accordion {
    position: relative;
}

.accordion .title-section {
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}

.accordion .title-section .title {
    display: inline-block;
    padding: 5px 10px;
    font-weight: 600;
}

.accordion .title-section .expand-icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../assets/icons/down-icon.png');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

.accordion .title-section .collapse-icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../assets/icons/up-icon.jpg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

.accordion .description {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
}

.position-relative {
    position: relative;
}

JavaScript

// Handling request using router
router.get("/",(req,res,next)=>{
    res.send("This is the homepage request")
})

var data = require('../data-store');
var projects = data.getProjects();
var router = require('express').Router();

module.exports = router;