I am new to ReactJS. I want help in converting the following simple HTML/CSS code into ReactJS. I want to have 3 CSS cards on my website with 2 places on top row and 1 in the center. Please help.
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width:40%;
height: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}<h2>Card</h2>
<div style="display: flex; justify-content: space-between; margin-top:100px; margin-right:150px; margin-left: 150px">
<div class="card">
<a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
style="width:100%"></a>
</div>
<div class="card">
<img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar" style="width:100%">
</div>
</div>
<div style="display: flex; justify-content: center; margin-top:100px; margin-right:150px; margin-left: 150px">
<div class="card">
<a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
style="width:100%"></a>
</div>
</div>Technically you can make a React website which looks like the way you want it. For this you have to create a card component in ReactJs and you can write jsx for the above HTML and css will be the same. just import it in your component. Your card component will look something like this:
import React from 'react';
import './styles.css';
function card() {
return (
<div>
<h2>Card</h2>
<div style={{display: flex; justifyContent: spaceBetween; marginTop:100px; marginRight:150px; marginLeft: 150px}}>
<div className="card">
<a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
style="width:100%"/></a>
</div>
<div className="card">
<img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar" style="width:100%"/>
</div>
</div>
<div style={{display: flex; justifyContent: center; marginTop:100px; marginRight:150px; marginLeft: 150px}}>
<div className="card">
<a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
style={{width:100%}}/></a>
</div>
</div>
</div>
)
}
export default card;
save your css in the same folder.