Break in paragraph-CodePudding

So for some reason i'm not able to create a broken line inside the paragraph such that I can get a new line... I'm using tailwind with react.

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Transform the way you interact with your customers. Collect valuable, actionable and credible feedback.</p>

So I've tried all these solutions, but I get errors.

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. <br> Collect valuable, actionable and credible feedback.</p>

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. <br> Collect valuable, actionable and credible feedback.</br> </p>

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. {"\n"} Collect valuable, actionable and credible feedback.</p>

CodePudding user response：

Relate to the answer here

Every html tags should be closed, remember this is jsx not html. Every component should be closed.

<br> in jsx ->  <br/>
<input> in jsx -> <input />

You can read about jsx more here

CodePudding user response：

The first one it's correct, just use a self closing tag so you won't get that error

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg 
xl:text-xl">
Transform the way you interact with your customers. <br/> Collect valuable, 
actionable and credible feedback.</p>