Code Detail

Prompt

2025年3月26日 12:46

Designed in a bold modern style that breaks traditional typography rules to create a strong visual impact. Use bright contrasting colors such as fluorescent pink, electric blue, bright yellow, etc., and use dark or bright color blocks for the background. Typography should be asymmetrical and dynamic, with extremely large headline text (at least 60px), using extremely bold or compressed fonts, and even allowing text to overlap and spill over. Graphic elements apply geometric shapes with sharp edges, irregular cropping effects can be added. Layers are created by extreme contrasts in size, color and placement. The overall design should be tense and vibrant, like a visual statement, referencing the work of Wired Magazine and Pentagram Design Studio. Add subtle kinetic effects such as hovering to zoom in or color shifts to enhance the modern feel.

Generated Result

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="header bg-electric-blue text-fluorescent-pink">
        <h1 className="headline text-9xl font-extrabold">BOLD & MODERN</h1>
      </header>
      <section className="about bg-bright-yellow text-dark">
        <h2 className="text-6xl font-bold">ABOUT US</h2>
        <p className="text-xl">We break the rules to create impact.</p>
      </section>
      <section className="services bg-dark text-fluorescent-pink">
        <h2 className="text-6xl font-bold">SERVICES</h2>
        <div className="grid grid-cols-3 gap-4">
          <div className="service bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Design</h3>
            <p className="text-lg">Innovative and bold designs.</p>
          </div>
          <div className="service bg-bright-yellow p-6">
            <h3 className="text-4xl font-bold">Strategy</h3>
            <p className="text-lg">Forward-thinking strategies.</p>
          </div>
          <div className="service bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Consulting</h3>
            <p className="text-lg">Expert consulting services.</p>
          </div>
        </div>
      </section>
      <section className="portfolio bg-fluorescent-pink text-dark">
        <h2 className="text-6xl font-bold">PORTFOLIO</h2>
        <div className="grid grid-cols-2 gap-4">
          <div className="portfolio-item bg-bright-yellow p-6">
            <h3 className="text-4xl font-bold">Project 1</h3>
            <p className="text-lg">A bold new approach.</p>
          </div>
          <div className="portfolio-item bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Project 2</h3>
            <p className="text-lg">Breaking the mold.</p>
          </div>
        </div>
      </section>
      <section className="testimonials bg-dark text-fluorescent-pink">
        <h2 className="text-6xl font-bold">TESTIMONIALS</h2>
        <div className="grid grid-cols-3 gap-4">
          <div className="testimonial bg-electric-blue p-6">
            <p className="text-lg">"Amazing work!"</p>
          </div>
          <div className="testimonial bg-bright-yellow p-6">
            <p className="text-lg">"Beyond expectations."</p>
          </div>
          <div className="testimonial bg-electric-blue p-6">
            <p className="text-lg">"Highly recommend."</p>
          </div>
        </div>
      </section>
      <section className="contact bg-fluorescent-pink text-dark">
        <h2 className="text-6xl font-bold">CONTACT</h2>
        <form className="grid grid-cols-1 gap-4">
          <input type="text" placeholder="Name" className="p-2" />
          <input type="email" placeholder="Email" className="p-2" />
          <textarea placeholder="Message" className="p-2" />
          <button type="submit" className="bg-electric-blue text-dark p-2">Send</button>
        </form>
      </section>
      <footer className="footer bg-dark text-fluorescent-pink">
        <p className="text-lg">© 2025 Bold & Modern. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox