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);
}
}
Recommendation
How to create charts in ReactJS
MultiSelect Components in React
For more React Tutorials Click here, Node.js Tutorials Click here.
If you like this, share this.
Follow us on Facebook, Twitter, Tumblr, LinkedIn, YouTube.
Comments are closed.