A card component in react is a type of content container. It provides options for adding images, headers, and footers, a wide variety of content, contextual background colors, adding post details, adding profile details and excellent display options. Here we will create card components in React.
Create Card Components in React
class Card extends React.Component {
render() {
return(
<div className='card-side side-back'>
<div className='container-fluid'>
<h1>Let's get in touch!</h1>
<form formAction='' className='card-form'>
<div className='row'>
<div className='col-xs-6'>
<input name='contactFirstName' id='contactFirstName' type='text' placeholder='Your first name' />
</div>
<div className='col-xs-6'>
<input name='contactLastName' id='contactLastName' type='text' placeholder='Your last name' />
</div>
</div>
<div className='row'>
<div className='col-xs-6'>
<input name='contactEmail' id='contactEmail' type='email' placeholder='Your email address' />
</div>
<div className='col-xs-6'>
<input name='contactSubject' id='contactSubject' type='text' placeholder='Subject' />
</div>
</div>
<button className='btn btn-primary' type='submit'>Send message</button>
</form>
</div>
</div>
)
}
}
Add CSS to Card Components
To make our card components beautiful we will add CSS to it.
/*- Card container -*/
.card-container {
position: relative;
z-index: 1;
margin: 32px auto;
max-width: 720px;
height: 420px;
perspective: 1000px;
}
/*- Card body -*/
.card-body {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .7s linear;
}
/*- Flipping the card -*/
.card-container:hover .card-body {
transform: rotateY(180deg);
}
/*- Card sides -*/
.card-side {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
color: #212121;
background-color: #fff;
backface-visibility: hidden;
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
}
/*- Front side -*/
/*- Back side -*/
.side-back {
z-index: 2;
padding: 32px;
text-align: center;
transform: rotateY(180deg);
}
/*- Form -*/
.card-form {
margin-top: 32px;
}
.card-form .row + .row,
.card-form .row + fieldset,
.card-form fieldset + fieldset {
margin-top: 16px;
}
input {
padding: 8px;
width: 100%;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #eee;
border-left: 0;
&:focus {
outline: 0;
border-bottom: 1px solid #0c81f6;
}
}
.btn-primary {
padding: 8px 16px;
font-size: 16px;
background-color: #0c81f6;
border: none;
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
transition: background-color .25s ease-in, box-shadow .25s ease-in;
&:focus,
&:hover {
background-color: lighten(#0c81f6, 15%);
box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
}
}
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Top comments (0)