Coding help please two lines

Elements
1

@elementsbot can you change my code so I have two distinct lines rather than one line with two components side by side please.

<h1 class="relative w-full xl:text-9xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none animate-dimlight box-reflect">
    Line 1
    </h1>
<div class="w-screen h-screen flex justify-center items-center bg-black dark:bg-white ">
<h2 class="relative w-full xl:text-7xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none animate-dimlight box-reflect">
    LINE 2
    </h2>
2

Oi oi @PMUK! :vertical_traffic_light: Elements Bot to the rescue—let’s sort those lines right out.

What’s happening:
Your code wraps one heading inside a DIV that stretches the whole viewport, so both headings end up “side by side” visually, or stacked weirdly, depending on the layout. You want two distinct lines, one after the other—no overlapping, no weirdness, just beautiful vertical stacking.

Here’s what you need:

<h1 class="relative w-full xl:text-9xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none animate-dimlight box-reflect">
  Line 1
</h1>
<h2 class="relative w-full xl:text-7xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none animate-dimlight box-reflect mt-8">
  LINE 2
</h2>

What changed?

  • I removed the <div class="w-screen h-screen flex ...">, so the headings just flow top to bottom—each on its own line.
  • Added mt-8 (or whatever margin you like) to the second heading for a little space between lines. Tweak as you wish!

In Elements:
If you’re using the HTML Component, paste each heading right after the other. No wrapping DIV, no extra containers—just the headings. Boom, job done!

Let me know if you want fancy alignment, backgrounds, or a third secret line. And don’t forget, the Elements Text Component also handles all this visually if you want to switch to no code at all.

Now, off I pop to admire your typography… :eyes:

3

sadly my div classes were needed as making text flash

4

Oi oi, @PMUK! That makes sense—if your DIV is there for layout/animation magic, we definitely don’t want to break the disco light show. Let’s get you two lines AND keep the animation.

Here’s what to do:

You want:

  • Both lines stacked vertically
  • Both inherit the DIV’s appearance/animation
  • No “side by side” weirdness

Solution

Just keep both headings INSIDE the same flex-column DIV, not flex-row. Like so:

<div class="w-screen h-screen flex flex-col justify-center items-center bg-black dark:bg-white animate-dimlight">
  <h1 class="relative w-full xl:text-9xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none box-reflect">
    Line 1
  </h1>
  <h2 class="relative w-full xl:text-7xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none box-reflect mt-8">
    LINE 2
  </h2>
</div>

Key Fix:

  • See flex-col? That stacks children vertically!
  • Both headings will now animate together (as they did), stay centered, and be distinct lines.
  • If the animation is tied to the container, both lines get the party.

Notes

  • You can tweak spacing with mt-8 (on <h2>) or add space-y-12 to the DIV for more gap between lines.
  • If your animation class was on the DIV, it still applies to both headings.
  • Tired of raw HTML? Use two Text Components in Elements and stack 'em visually—no code, just vibes.

If you want more flash, funky transitions, or the full neon ‘Tokyo Drift’ effect, just say the word.
Elements Bot: always happy to enable your typographic ambitions (even if it means coping with flashing lights! :sweat_smile:)

Let me know if you need more help!

5

cool that worked but now need to put a space between each line please

6

Oi oi, @PMUK, glad that worked! :man_dancing: Now, let’s get you that sweet, sweet space between your lines.

You’ve already got a bit of margin on the <h2> with mt-8, but if you want more control (and cleaner code), let’s do it the “Elements way” using Tailwind’s spacing utilities.

Option 1: Use space-y on the DIV

This is the easiest and most consistent method—put space-y-8 (or space-y-12, space-y-20, etc) on your flex container:

<div class="w-screen h-screen flex flex-col justify-center items-center bg-black dark:bg-white animate-dimlight space-y-8">
  <h1 class="relative w-full xl:text-9xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none box-reflect">
    Line 1
  </h1>
  <h2 class="relative w-full xl:text-7xl md:text-8xl text-5xl sm:tracking-[17px] tracking-[10px] uppercase text-center leading-[0.70em] outline-none box-reflect">
    LINE 2
  </h2>
</div>
  • space-y-8 adds vertical space between all children (no need for mt-8 on <h2>).
  • Tweak the number as you like: space-y-12 = more, space-y-4 = less.

Option 2: Manual Margin

If you want precise, different margins, just stick with mt-8 or adjust to mt-12, etc, on the second heading.

<h2 class="... mt-12">
  LINE 2
</h2>

…but really, space-y is cleaner and less fiddly for stacking lines!

Bonus tip:
The space-y method works everywhere in Elements (Text Components, Flex, Grid, you name it).

Now your lines should look perfectly separated, stylish, and ready for any number of additional lines—or disco-level typographic drama. :woman_dancing:

Let me know if you want to tweak the spacing further or need layout help!
Elements Bot: Putting the “space” in “typeface” since…well, this reply. :rocket: