Scribd
Upload
8 views2 pages

Stateless Component

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views2 pages

Stateless Component

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React from 'react';

import ReactDOM from 'react-dom';

// WelcomeCard Component
const WelcomeCard = () => {
return (
<div style={styles.card}>
<h1 style={styles.title}>Welcome to Our Blog!</h1>
<p style={styles.message}>
We're glad you're here. Discover articles on tech, travel, and personal
growth!
</p>
<p style={styles.closing}>Happy Reading, The Blog Team</p>
</div>
);
};

// App Component
const App = () => {
return (
<div>
<h1 style={{ textAlign: 'center' }}>Personal Blog</h1>
<WelcomeCard />
</div>
);
};

// Styling Object
const styles = {
card: {
border: '1px solid #ccc',
borderRadius: '8px',
padding: '20px',
maxWidth: '400px',
margin: '50px auto',
textAlign: 'center',
backgroundColor: '#f9f9f9',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
},
title: {
fontSize: '24px',
color: '#333',
},
message: {
fontSize: '16px',
color: '#555',
},
closing: {
fontSize: '14px',
color: '#777',
marginTop: '20px',
},
};

// Render App
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

You might also like