screenshot-to-code
screenshot-to-code copied to clipboard
Published
20 hours ago •
abi
abi
Added CSS as styles in REACT
Current PR added a prompt to create code of REACT with CSS styles.
ORIGINAL:
GENERATED:
CODEPEN: https://codepen.io/carlosziegler/pen/wvOxoLM
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Zillow</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
<style>
#root {
font-family: 'Open Sans', sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
text-align: center;
margin-bottom: 30px;
}
.tab {
display: flex;
justify-content: space-around;
margin-bottom: 30px;
}
.tab div {
font-weight: 600;
color: #555;
}
.tab div.active {
border-bottom: 2px solid #000;
}
input[type="email"], input[type="password"] {
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: none;
border-radius: 4px;
background-color: #007AFF;
color: white;
font-size: 16px;
cursor: pointer;
}
.forgot-password {
text-align: center;
display: block;
margin-bottom: 30px;
color: #007AFF;
font-size: 14px;
}
.divider {
text-align: center;
margin-bottom: 20px;
color: #777;
}
.social-login {
display: flex;
flex-direction: column;
}
.social-login button {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
color: #555;
font-size: 16px;
border: 1px solid #ccc;
}
.social-login button i {
margin-right: 8px;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
return (
<div>
<h1>Welcome to Zillow</h1>
<div className="tab">
<div className="active">Sign in</div>
<div>New account</div>
</div>
<form>
<input type="email" placeholder="Email" defaultValue="[email protected]" />
<input type="password" placeholder="Password" defaultValue="**********" />
<button type="submit">Sign in</button>
</form>
<a href="#" className="forgot-password">Forgot your password?</a>
<div className="divider">Or connect with:</div>
<div className="social-login">
<button>
<i className="fab fa-apple"></i> Continue with Apple
</button>
<button>
<i className="fab fa-facebook-f"></i> Continue with Facebook
</button>
<button>
<i className="fab fa-google"></i> Continue with Google
</button>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
