How to put line breaks using tailwind, and js?

Question

I am using a terminal template from tailwind to display terminal commands and outputs on my blog. However, when I try to include more lines on the page, everything gets displayed together. I want it to be displayed like in the terminal, with line breaks. The template code is as follows:

import React from 'react'

const Terminal = ({texto}) => {
  return (
  <div class="w-full my-4">
  <div class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 text-sm font-mono subpixel-antialiased 
              bg-gray-700  pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
      <div class="top mb-2 flex">
          <div class="h-3 w-3 bg-red-500 rounded-full"></div>
          <div class="ml-2 h-3 w-3 bg-orange-300 rounded-full"></div>
          <div class="ml-2 h-3 w-3 bg-green-500 rounded-full"></div>
      </div>
      <div class="mt-4 flex text-lg">
          <span class="text-green-400">computer:~$</span>
          <p class="flex-1 typing items-center pl-2 text-lg">
              {texto}
          </p>
      </div>
  </div>
  </div>
  )
}

export default Terminal

And this is how I'm using it:

text blog, text blog, blah blah blah
      
<Terminal texto={'git status \n\ On branch dev \n Your branch is up to date with "origin/dev". \n Changes to be committed: (use "git restore --staged <file>..." to unstage) modified:   components/styleComponents/Terminal.js Changes not staged for commit:  (use "git add <file>..." to update what will be committed)  (use "git restore <file>..." to discard changes in working directory)        modified:   components/git/Cambios.js'}/>

text blog, text blog, blah blah blah

My expected result is:

computer:~$ git status 
On branch dev 
Your branch is up to date with "origin/dev". 

Changes to be committed:
   (use "git restore --staged <file>..." to unstage)
        modified: components/styleComponents/Terminal.js

Changes not staged for commit:
   (use "git add <file>..." to update what will be committed)
   (use "git restore <file>..." to discard changes in working directory)
        modified: components/git/Cambios.js

However, I get the output as:

computer:~$ git status On branch dev Your branch is up to date with "origin/dev". Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: components/styleComponents/Terminal.js Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: components/git/Cambios.js

I have tried using \n and even <br> but nothing seems to work. Can someone help me solve this issue? Thanks.

How to put line breaks using tailwind, and js?

0 Answers0