I need to enhance the red-framed box_switch
section in the image above by moving it to the top and applying a background color.
https://i.sstatic.net/NZPUQ.png
React.js
<div className="container">
<div className="row mx-auto text-center">
<>
<div className="col-12">
<div className="box_switch">
<img className="" src={plugon_pic} />
<p className="under_ic_switch_state">{item.state}</p>
</div>
</div>
</>
</div>
</div>
App.css
.box_switch {
position: relative;
background:#1E3E75;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
margin: 0 calc(50% - 50vw) 15px;
width: 100vw;
}
.box_switch {
position: relative;
background: #1E3E75;
padding: 15px;
border-radius: 10px;
margin-bottom: 30px;
margin: 0 calc(50% - 50vw) 15px;
width: 100vw;
}
<div class="container">
<div class="row mx-auto text-center">
<div class="col-12">
<div class="box_switch">
<img class="" src="https://via.placeholder.com/100" />
<p class="under_ic_switch_state">{item.state}</p>
</div>
</div>
</div>
</div>