Collapse

Accordion Open

Use this component to show and hide the information. To set open collapse use .open class.

Who creates websites?

Web design increases accessibility for all potential users while identifying the objectives of a website or webpage. In this procedure, applications and other interactive components are integrated along with the organization of text and images throughout a number of pages.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading bg-primary">Who creates websites? </h4>
       <div class="accordionItemContent">
         <p> Web design increases accessibility for all potential users while 
              <strong class="text-danger">identifying the objectives </strong> of a website or webpage. In this procedure, applications and other interactive components are integrated along with the organization of text and images throughout a number of pages. </p>
       </div>
    </div>
   </div> 
</div>

Accordion Close

To set this component default close with the help of .close class.

What is Tailwind Css

In essence, Tailwind CSS is a utility-first CSS framework for quickly creating unique user experiences. It is a low-level CSS framework that is extremely adaptable and provides all the building blocks required to create custom designs without requiring you to struggle to overcome obnoxious opinionated styles.

Why Tailwind CSS?

Quicker UI construction procedure

Because it is a utility-first CSS framework, we may create custom designs using utility classes rather than writing CSS as in the conventional method.

Advantages of Tailwind CSS

The names of CSS classes and IDs are no longer amusing.

Minimum number of lines in a CSS file.

To produce the components, we can alter the designs.

Creates a responsive website. 

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-primary"> What is Tailwind Css </h4>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
         <p> In essence, Tailwind CSS... </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-warning"> Why Tailwind CSS? </h4>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
          <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Quicker UI construction procedure
          </p>  
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Because it is a utility-first
          </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-success">Advantages of Tailwind CSS</h4>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
          <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              The names of CSS..
          </p>  
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Minimum number of lines..
          </p>
          <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              To produce the components..
          </p>
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Creates a responsive website.
          </p>
       </div>
    </div>
   </div> 
</div>

Accordion Collapse

This is default component, to set default close use .close class.

Search Engine Optimization

SEO is a technique for increasing the likelihood that a website will be found by search engines. Information on websites is coded so that search engines can read it. Because the website appears on the first pages of search results, making it easier for users to locate it, it may increase business.

Mobile Responsiveness

A website's ability to display on a mobile device and adjust its layout and proportions to be readable is known as mobile responsiveness. Web design makes sure that websites are simple to browse and use on mobile devices. Customers may easily find a business with a well-designed, mobile-responsive website.

Improved Sales

A compelling website aims to increase sales of products or attract more engaged customers. Web design assists the company in increasing conversions on their website and sales as it reaches targeted customers and search engines.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="flex justify-between accordionItemHeading bg-gray-light text-title"> Search Engine Optimization </h4>
         <span class="collapse-icon">
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p> SEO is a technique for..</p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-gray-light text-title"> Mobile Responsiveness </h4>
         <span class="collapse-icon">
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p> A website's ability to display... </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-gray-light text-title"> Improved sales </h4>
         <span class="collapse-icon">
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p> A compelling website aims to... </p>
       </div>
    </div>
   </div> 
</div>

Flush Collapse

Set flush collapses using .flush class.

How should my profile be set up?

On the anniversary of your initial paid sign-up date, your SlickText service is renewed. The billing date won't change if you upgrade in the middle of your billing cycle. However, upgrading compels a prorated payment to be applied to your account right away.

What are my project options?

Your bill will renew based on the date you upgraded to a premium plan if you initially signed up for a free account with Slicktext and later switched to one. In your SlickText account, under Plan Options, you may examine all of your bills.

How do I change my voice settings?

No, we are unable to give you this information. An anonymous, private action is unsubscribing from a list. This stops additional harassing. Providing this information is viewed negatively, and any additional communication after they choose not to receive it would be deemed a violation of their consent.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading"> How should my profile be set up? </h4>
       <div class="accordionItemContent">
         <p>On the anniversary of your..</p>
       </div>
    </div> 
    <div class="accordionItem close">
       <h4 class="accordionItemHeading"> What are my project options? </h4>
       <div class="accordionItemContent">
         <p>Your bill will renew..</p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading"> How do I change my voice settings? </h4>
       <div class="accordionItemContent">
         <p> No, we are unable to give you...</p>
       </div>
    </div>
   </div> 
</div>

Colored Collapse

Use different color to set different color accordion by using .bg-* class.

User interface design: what is it?

The technique that designers use to create user interfaces in software or computerized devices with a focus on aesthetics or style is known as user interface (UI) design. Designers strive to produce user-friendly and enjoyable interfaces. Graphical user interfaces and other types, such as voice-controlled interfaces, are referred to as "UI design."

Digital marketing: What is it?

You may have heard of the fascinating career opportunity of digital marketing. According to Pew Research, people' continuous internet usage has climbed by 5% over the past three years. This indicates that there has been a significant change in how people communicate, purchase, sell, and conduct business, and that online marketing is a successful strategy moving ahead.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-primary">User interface design: what is it? </h4>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
         <p>  The technique that designers... </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-warning"> Digital marketing: What is it? </h4>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
         <p> You may have heard of... </p>
       </div>
    </div>
   </div> 
</div>

Collapse with Arrows

Set different color accordion with different arrow using .bg-* class.

Maintain Contact

These systems are primarily used to block access to content that has been identified as being inappropriate for users under a certain age (either voluntarily or in accordance with local laws), such as alcohol and tobacco advertising, internet pornography or other adult-oriented content, objectionable video games, or to comply with online privacy laws that govern the gathering of personal information from minors.

Talks to Others

You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.

Chat: Use when you prefer a dedicated chat experience and don't mind switching between different apps.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="flex justify-between accordionItemHeading bg-warning"> Maintain Contact </h4>
         <span class="collapse-icon">
           +SVG_ICON("Arrow-Down-2","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
         <p>These systems are primarily...</p>
       </div>
    </div>
    <div class="accordionItem open">
       <h4 class="accordionItemHeading bg-success"> Talks to Others </h4>
         <span class="collapse-icon">
           +SVG_ICON("Arrow-Down-2","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent dark:bg-sidebar-dark2">
         <p>You get the same features...</p>
         <p> <span class="mt-1 font-bold text-title"> Chat: </span>Use when you...</p>
       </div>
    </div>
   </div> 
</div>

Collapse with Icons

Use icons with collapse using .close class.

Who creates websites?

Web design increases accessibility for all potential users while identifying the objectives of a website or webpage. In this procedure, applications and other interactive components are integrated along with the organization of text and images throughout a number of pages.

What purpose does web design serve?

Companies can create or maintain a strong brand identity for their company through web design. When a website consistently conveys a company's identity, it is simpler to navigate and visitors are better able to associate the visual components of a brand with a particular organisation and its goods or services.

What components make up web design?

Layout

Images

Visual hierarchy

Color scheme

Typography

Navigation

Readability 

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open ">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-primary !text-primary"> Who creates websites? </h4>
         <span>
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] !stroke-white mr-2 ")
         </span>
       <div class="accordionItemContent border-1 border-primary">
            <p> Web design increases accessibility for all potential users while 
              <strong class="text-danger">identifying the objectives </strong> of a website or webpage. In this procedure, applications and other interactive components are integrated along with the organization of text and images throughout a number of pages. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-secondary !text-secondary"> What purpose does web design serve? </h4>
         <span>
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] !stroke-white mr-2 ")
         </span>
       <div class="accordionItemContent border-1 border-secondary">
         <p> Companies can create...</p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-info !text-info"> What components make up web design? </h4>
         <span>
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] stroke-white mr-2 ")
         </span>
       <div class="accordionItemContent border-1 border-info">
         <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Layout
          </p>  
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Images
          </p>
          <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Visual hierarchy
          </p>  
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Color scheme
          </p>
         <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Typography
          </p>  
          <p class="flex items-center gap-2"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Navigation
          </p>
          <p class="text-xs text-content3"> 
              +SVG_ICON("Arrow-Right", "min-w-[16px] w-4 h-4 !stroke-title")
              Readability
          </p>
       </div>
    </div>
   </div> 
</div>

Arrow Style

Use Different type of arrow with collapse .close class.

How should my profile be set up?

On the anniversary of your initial paid sign-up date, your SlickText service is renewed. The billing date won't change if you upgrade in the middle of your billing cycle. However, upgrading compels a prorated payment to be applied to your account right away.

What are my project options?

Your bill will renew based on the date you upgraded to a premium plan if you initially signed up for a free account with Slicktext and later switched to one. In your SlickText account, under Plan Options, you may examine all of your bills.

How do I change my voice settings?

No, we are unable to give you this information. An anonymous, private action is unsubscribing from a list. This stops additional harassing. Providing this information is viewed negatively, and any additional communication after they choose not to receive it would be deemed a violation of their consent.

<div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper"> 
    <div class="accordionItem open"> 
       <h4 class="flex justify-between accordionItemHeading bg-warning"> How should my profile be set up? </h4>
         <span class="collapse-icon">
           +SVG_ICON("Swap","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p> On the anniversary of...</p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="flex justify-between accordionItemHeading bg-secondary"> What are my project options? </h4>
         <span class="collapse-icon">
            +SVG_ICON("Arrow-Down-Circle","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p> Your bill will renew...</p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="flex justify-between accordionItemHeading bg-success"> How do I change my voice settings?  </h4>
         <span class="collapse-icon">
           +SVG_ICON("Arrow-Down-2","w-[1.25rem] h-[1.25rem] stroke-white")
         </span>
       <div class="accordionItemContent">
         <p>No, we are unable to give... </p>
       </div>
    </div>
   </div>
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode