Html Question posted in
Some basic documentation can be found here.

Html – how to display text with nextline, space in flex and tailwind CSS

There are several lines text with dot. I tried to use whitespace-pre-line, but it didn’t work.

This is the code

<div className="flex items-center group" >
    <p
       className="px-6 py-3 rounded-b-lg rounded-r-lg bg-gray-800 w-[28rem] max-w-xs lg:max-w-md text-gray-200 whitespace-pre-line">
           Hello @Green 

           Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/ service as listed.

           • We recommend integrating AI into your existing website or mobile application to enhance its performance. 
           • Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends. 
           • Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.

Thank you for considering VPN Infotech; we're excited about the prospect of working together again.

Best regards.
      </p>

This is the result
enter image description here

I need to display text with nextline, space in flex and tailwind CSS

Tags:

2

Answers


  1. 0

    HTML Structure

    Use <div> tags to create flex containers
Use <span> or <div> tags for text element
Use n in text content for new line

    Tailwind CSS Classes

    flex: To create a flex container.
flex-col: To arrange items in a column.

    whitespace-pre-line: To preserve whitespace and new lines in text.

    You can further customize the appearance using Tailwind CSS classes:

    Adjust spacing: space-y-2, space-y-6

    Adjust padding: p-2, p-6

    Add text styles: text-lg, font-bold

    Login or Signup to reply.
  2. 0

    As per our conversation above, I would say that I do not fully understand what you actually need, but let’s try.

    Here is the proposed solution using ul and li

        <div class="max-w-2xl mx-auto bg-white p-6 rounded shadow">
        <p>Hello @Green,</p>
        
        <p class="mt-4">
            Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/service as listed.
        </p>
        
        <ul class="list-disc pl-6 mt-4">
            <li>We recommend integrating AI into your existing website or mobile application to enhance its performance.</li>
            <li>Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends.</li>
            <li>Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.</li>
        </ul>
        
        <p class="mt-4">
            Thank you for considering VPN Infotech; we're excited about the prospect of working together again.
        </p>
        
        <p class="mt-4">Best regards,</p>
    </div>

    and here is another one without li and ul

        <div class="max-w-2xl mx-auto bg-white p-6 rounded shadow space-y-4">
        <p>Hello @Green,</p>
        
        <p>
            Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/service as listed.
        </p>
        
        <p class="pl-4">• We recommend integrating AI into your existing website or mobile application to enhance its performance.</p>
        <p class="pl-4">• Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends.</p>
        <p class="pl-4">• Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.</p>
        
        <p>
            Thank you for considering VPN Infotech; we're excited about the prospect of working together again.
        </p>
        
        <p>Best regards,</p>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search