A
Anonymous

Service Info Bar

.service-info-bar .main-head { color: #333; border-color: #012b72; } /* Iconbox Style6 */ .iconbox.style6 { padding: 5px; margin-bottom: 25px; text-align: center; border-radius: 10px; height: 210px; box-shadow: 0px 3px 0 0 #faeddf; border: 1px solid #faeddf; } .iconbox { } .iconbox.style6:hover { box-shadow: none; } .iconbox.style6 .iconbox-icon img { /*min-height:130px;*/ height: 130px; /*margin-bottom:15px;*/ } .iconbox.style6 .iconbox-icon { position: relative; bottom: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .iconbox.style6:hover .iconbox-icon { bottom: 5px; } .iconbox-content h4 { margin: 20px 0 9px; font-size: 13px; line-height: 24px; font-weight: bold; text-transform: uppercase; } .iconbox-content p { margin: 20px 0 9px; font-size: 10px !important; line-height: 24px; font-weight: 600; } .iconbox.style6 .iconbox-content { line-height: 24px; color: #012877 !important; position: relative; left: 0; right: 0; bottom: -19px; border-top: 1px solid #faeddf; } .branch-code { padding: 5px 10px !important; border-radius: 0px; background: #00bc51; color: #fff; display: inline-block; margin-top: 4px !important; } .time-bar { margin-top: 5px; } .dashboard-sec { padding: 50px 0; background: #f2f2f2; } .small-box { border-radius: 10px; position: relative; display: block; margin-bottom: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); overflow: hidden; } .small-box > .inner { padding: 25px 10px; border-radius: 10px; } .small-box > .small-box-footer { position: relative; text-align: center; padding: 15px 0; color: #fff !important; color: rgba(255, 255, 255, 0.8); display: block; z-index: 10; background: rgba(0, 0, 0, 0.1); text-decoration: none } .small-box > .small-box-footer:hover { color: #fff; background: rgba(0, 0, 0, 0.15) } .small-box h3 { font-size: 38px; font-weight: bold; margin: 0 0 10px 0; white-space: nowrap; padding: 0 } .small-box p { font-size: 15px } .small-box p > small { display: block; color: #f9f9f9; font-size: 13px; margin-top: 5px } .small-box h3, .small-box p { z-index: 5 } .small-box .icon { -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: absolute; top: -20px; right: 10px; z-index: 0; font-size: 90px; color: rgba(0, 0, 0, 0.15) } .small-box .icon img { width: 65px; } .small-box:hover { text-decoration: none; color: #f9f9f9 } .small-box:hover .icon { font-size: 95px } create all media query with responsive

Prompt
Component Preview

About

Create a sleek, responsive service info bar component in React using Tailwind CSS. Perfect for showcasing features with icons and descriptions on any device.

Share

Last updated 1 month ago