JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<script src="https://kit.fontawesome.com/40080f6cf6.js"></script>
<html>
<head>
<body>
<div class="cardcontainer">
        <div class="carouselcontainer commonattr">
            <div class="carouselslidecontainer commonattr">
                <div id="carouselExampleIndicators" class="carousel slide commonattr" data-ride="carousel" data-interval="false">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active w-100"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1" class="w-100"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2" class="w-100"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox" id="carousel-bg">
                        <div class="carousel-item item active">
                            <div class="carouseltest">
                                <img class="theimage" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="First slide">
                            </div>
                        </div>
                        <div class="carousel-item item ">
                            <div class="carouseltest">
                                <img class="theimage" src="https://ilarge.lisimg.com/image/11667827/900full-patrick-kafka.jpg" alt="Second slide">
                            </div>
                        </div>
                     ...

CSS

@media screen and (min-width: 500px) {
    .commonattr {
        min-width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .commonattr {
        min-width: 400px;
    }
}
@media screen and (max-height: 400px) {
    .carouseltest {
        height: 60vh;
    }
    
}
.cardcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.carouselslidecontainer {
    width: 100vw;
    margin: 0 auto
}
.carouselslidecontainer {
    width: 100vw;
    margin: 0 auto
}
.carouselslidecontainer {
    width: 100vw;
    margin: 0 auto
}

.carousel-item {
    z-index: 2;
    object-fit: cover;
}
.carouseltest {
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.8)10%, rgba(0, 0, 0, 0)30%);
    box-sizing: border-box;
    /* height: 600px; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
.infocontainer {
    width: 100vw;
    /* min-width: 300px; */
    height: 170px;
    background: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: white;
    display: flex;
    flex-direction: column;
}
.nameline {
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    padding-left: 12px;
    padding-top: 5px;
}
.infoline {
    display: flex;
}
.faicon {
    padding-left: 12px;
    padding-top: 5px;
}
.infolinetext {
    font-family: 'Roboto', sans-serif;
    padding-left: 12px;
    padding-top: 5px;
    font-size: 12;
}
.companyinfocontainer {
    background: white;
    display: flex;
    width: 100vw;
    /* min-width: 300px; */
    height: 100%;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.aboutus {
    font-weight: bold;
    padding-left: 8px;
    padding-top: 12px;
    font-size: 19px;
}
.compdesc {
    font-family: 'Raleway', sans-serif;
    padding: 8px;
    font-size: 14px;
}
@media screen and (min-width: 420px) {
 ...