3 Responsive UI Component box design using HTML & CSS3

CSS, or Cascading Style Sheets, is a style sheet language that is used to style your web content. In this tutorial, we are going to learn about CSS basics by building a card component from scratch.

For all component I using latest version of Bootstrap Framework

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">

Component 1

HTML Code:

<section>
  <div class="container">
    <h2 class="section-title"><span>Content Box 1</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-8">
          <div class="content-box-8-icon-wrapper">
            <div class="content-box-8-icon-box">
              <span class="content-box-8-icon">
                <i class="icon_adjust-horiz"></i>
              </span>
            </div>
          </div>
          <div class="content-box-8-content-wrapper">
            <h3 class="content-box-8-title">Business Stratagy</h3>
            <div class="content-box-8-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-8-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-8 color-2">
          <div class="content-box-8-icon-wrapper">
            <div class="content-box-8-icon-box">
              <span class="content-box-8-icon">
                <i class="icon_link_alt"></i>
              </span>
            </div>
          </div>
          <div class="content-box-8-content-wrapper">
            <h3 class="content-box-8-title">Website Development</h3>
            <div class="content-box-8-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-8-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-8 color-3">
          <div class="content-box-8-icon-wrapper">
            <div class="content-box-8-icon-box">
              <span class="content-box-8-icon">
                <i class="icon_lightbulb_alt"></i>
              </span>
            </div>
          </div>
          <div class="content-box-8-content-wrapper">
            <h3 class="content-box-8-title">Creative services</h3>
            <div class="content-box-8-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-8-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-8 {
  background: #ffffff;
  padding: 50px 40px;
  position: relative;
  box-shadow: 0 15px 40px rgba(69, 63, 181, 0.1);
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-8::before {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #6a4bc4;
  transition: transform 250ms ease-in;
  transform: scaleX(0);
  transform-origin: right center
}

.content-box-8:hover::before {
  transform: scaleX(1);
  transform-origin: left center
}
.content-box-8-content-wrapper {
  letter-spacing: 1px;
}
.content-box-8-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #343a40;
}
.content-box-8-content {
  color: #858aa7;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-8-icon-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 50px;
  position: relative;
}
.content-box-8-icon-wrapper::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-shadow: 0 25px 45px 0 #6a4bc4;
  opacity: .3;
  background-color: #fff;
  border: 14px solid #fff;
}
.content-box-8-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #6a4bc4;
  border-radius: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.content-box-8-icon-box::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-image: linear-gradient(45deg,rgba(0,0,0,.15) 0,rgba(0,212,255,0) 60%);
}
.content-box-8-icon-box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-shadow: 0 15px 15px 0 #6a4bc4;
  opacity: .3;
}
.content-box-8-icon {
  color: #fff;
  font-size: 36px;
  line-height: 0;
}
.content-box-8-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  background: #6a4bc4;
  box-shadow: 0 10px 45px 0 #6a4bc4;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 15px;
  border-radius: 50px;
  transition: 0.3s;
}


.content-box-8.color-2 .content-box-8-icon-wrapper::before {
  box-shadow: 0 25px 45px 0 #54e0c4;
}
.content-box-8.color-2 .content-box-8-icon-box {
  background-color: #54e0c4;
}

.content-box-8.color-2 .content-box-8-icon-box::after {
  box-shadow: 0 15px 15px 0 #54e0c4;
}
.content-box-8.color-2 .content-box-8-button {
  background: #54e0c4;
  box-shadow: 0 10px 45px 0 #54e0c4;
}
.content-box-8.color-2::before {
  background-color: #54e0c4;
}


.content-box-8.color-3 .content-box-8-icon-wrapper::before {
  box-shadow: 0 25px 45px 0 #ffb507;
}
.content-box-8.color-3 .content-box-8-icon-box {
  background-color: #ffb507;
}

.content-box-8.color-3 .content-box-8-icon-box::after {
  box-shadow: 0 15px 15px 0 #ffb507;
}
.content-box-8.color-3 .content-box-8-button {
  background: #ffb507;
  box-shadow: 0 10px 45px 0 #ffb507;
}
.content-box-8.color-3::before {
  background-color: #ffb507;
}

Component 2

HTML Code:

<section class="bg-white">
  <div class="container">
    <h2 class="section-title"><span>Content Box 2</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-10">
          <div class="content-box-10-content-wrapper">
            <div class="content-box-10-icon">
              <i class="icon_adjust-horiz"></i>
            </div>
            <h3 class="content-box-10-title">Business Stratagy</h3>
            <div class="content-box-10-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <div class="content-box-10-button-wrapper">
            <a class="content-box-10-button" href="#">View Details</a>
          </div>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-10 color-2">
          <div class="content-box-10-content-wrapper">
            <div class="content-box-10-icon">
              <i class="icon_link_alt"></i>
            </div>
            <h3 class="content-box-10-title">Website Development</h3>
            <div class="content-box-10-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <div class="content-box-10-button-wrapper">
            <a class="content-box-10-button" href="#">View Details</a>
          </div>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-10 color-3">
          <div class="content-box-10-content-wrapper">
            <div class="content-box-10-icon">
              <i class="icon_lightbulb_alt"></i>
            </div>
            <h3 class="content-box-10-title">Creative services</h3>
            <div class="content-box-10-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <div class="content-box-10-button-wrapper">
            <a class="content-box-10-button" href="#">View Details</a>
          </div>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-10 {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  text-align: center;
  background: #f3f3f7;
  margin-bottom: 30px;
  margin-top: 20px;
  transition: 0.3s;
}
.content-box-10:hover {
  background: #6a4bc4;
  box-shadow: 0 15px 40px #6a4bc4b3;
}
.content-box-10-content-wrapper {
  letter-spacing: 1px;
  background: #ffffff;
  box-shadow: 0 10px 25px #3a3c4a1f;
  margin-top: -40px;
  margin-bottom: 30px;
  padding: 30px 15px;
  border-radius: inherit;
}
.content-box-10-title {
  font-size: 20px;
  margin: 0 0 20px;
  color: #6a4bc4;
  transition: 0.3s;
}
.content-box-10-content {
  color: #858aa7;
  font-size: 15px;
  line-height: 1.6;
  transition: 0.3s;
}
.content-box-10:hover .content-box-10-content {
  color: #6a4bc4;
}
.content-box-10-icon {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  margin-bottom: 50px;
  background: #6a4bc4;
  box-shadow: 0 0 30px 0 #26252947 inset, 0 15px 45px 0 #6a4bc4;
  color: #fff;
  font-size: 36px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.content-box-10-button {
  display: inline-block;
  text-decoration: none;
  color: #6a4bc4;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
.content-box-10:hover .content-box-10-button {
  color: #fff !important;
}


.content-box-10.color-2:hover {
  background: #54e0c4;
  box-shadow: 0 15px 40px #54e0c4b3;
}
.content-box-10.color-2 .content-box-10-title {
  color: #54e0c4;
}
.content-box-10.color-2:hover .content-box-10-content {
  color: #54e0c4;
}
.content-box-10.color-2 .content-box-10-icon {
  background: #54e0c4;
  box-shadow: 0 0 30px 0 #26252947 inset, 0 15px 45px 0 #54e0c4;
}
.content-box-10.color-2 .content-box-10-button {
  color: #54e0c4;
}

.content-box-10.color-3:hover {
  background: #ffb507;
  box-shadow: 0 15px 40px #ffb507b3;
}
.content-box-10.color-3 .content-box-10-title {
  color: #ffb507;
}
.content-box-10.color-3:hover .content-box-10-content {
  color: #ffb507;
}
.content-box-10.color-3 .content-box-10-icon {
  background: #ffb507;
  box-shadow: 0 0 30px 0 #26252947 inset, 0 15px 45px 0 #ffb507;
}
.content-box-10.color-3 .content-box-10-button {
  color: #ffb507;
}

Component 3

HTML Code:

<section class="bg-white">
  <div class="container">
    <h2 class="section-title"><span>Content Box 3</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-12">
          <div class="content-box-12-icon">
            <i class="icon_adjust-horiz"></i>
          </div>
          <div class="content-box-12-content-wrapper">
            <h3 class="content-box-12-title">Business Stratagy</h3>
            <div class="content-box-12-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-12-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-12 color-2">
          <div class="content-box-12-icon">
            <i class="icon_link_alt"></i>
          </div>
          <div class="content-box-12-content-wrapper">
            <h3 class="content-box-12-title">Website Development</h3>
            <div class="content-box-12-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-12-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-12 color-3">
          <div class="content-box-12-icon">
            <i class="icon_lightbulb_alt"></i>
          </div>
          <div class="content-box-12-content-wrapper">
            <h3 class="content-box-12-title">Creative services</h3>
            <div class="content-box-12-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          </div>
          <a class="content-box-12-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-12 {
  border: 1px solid #dbdce6;
  padding: 50px 40px;
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-12::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  border: 1px solid #6a4bc4;
  transform: scale(1.2);
  opacity: 0;
  transition: 0.3s;
}
.content-box-12:hover::before {
  transform: scaleX(1);
  opacity: 1;
}
.content-box-12-content-wrapper {
  letter-spacing: 1px;
  position: relative;
}
.content-box-12-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #6a4bc4;
  transition: 0.3s;
}
.content-box-12-content {
  color: #858aa7;
  font-size: 15px;
  line-height: 1.6;
  transition: 0.3s;
}

.content-box-12-icon {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  margin-bottom: 30px;
  border: 1px solid #6a4bc4;
  color: #6a4bc4;
  font-size: 40px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.content-box-12:hover .content-box-12-icon {
  border-radius: 50%;
}
.content-box-12-button {
  display: inline-block;
  margin-top: 26px;
  padding-bottom: 3px;
  text-decoration: none;
  color: #343a40;
  border-bottom: 1px solid #343a40;
  font-size: 16px;
  position: relative;
  font-weight: 600;
  transition: 0.3s;
}


.content-box-12.color-2::before {
  border: 1px solid #54e0c4;
}
.content-box-12.color-2 .content-box-12-title {
  color: #54e0c4;
}
.content-box-12.color-2 .content-box-12-icon {
  border: 1px solid #54e0c4;
  color: #54e0c4;
}



.content-box-12.color-3::before {
  border: 1px solid #ffb507;
}
.content-box-12.color-3 .content-box-12-title {
  color: #ffb507;
}
.content-box-12.color-3 .content-box-12-icon {
  border: 1px solid #ffb507;
  color: #ffb507;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply