html - making a box with Header

Question

I am trying to make a box with Header and I want some text inside the box. Below is what I want:

any help will be highly appreciated.

question from:https://stackoverflow.com/questions/65949029/making-a-box-with-header

Answer 1

.main-box{
    border:1px solid #000;
}
.box-title{
    background-color:#000;
    padding:10px;
    color:#fff;
    font-weight:600;
}
.box-content{
    padding-left:10px;
    padding-right:10px;
}
.box-msg{
    font-weight:600;
}

<div class="main-box">
    <div class="box-title">
        Your order has been submitted
    </div>
    <div class="box-content">
        <p class="box-msg">Thank you for your order.</p>
        <p>Transaction #:</p>
        <p>Transaction Date:</p>
        <p>Name:</p>
    </div>
</div>