UI Components – Cronos Library

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-align-items-center">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md mr-auto-desktop is-relative">
          <img class="is-absolute is-block-widescreen is-hidden-touch is-bottom-0 is-left-0" style="width: 160px; margin-left: -80px; z-index: 1;" src="cronos-assets/elements/light-squares.svg" alt="">
          <img class="ml-20 is-absolute is-block-widescreen is-hidden-touch is-top-0 is-right-0" style="width: 88px; margin-right: -88px; z-index: 1;" src="cronos-assets/elements/warning-group-square.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 100%" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-14 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <h6 class="mb-3 has-text-weight-bold is-size-4">Check of access</h6>
              <p class="subtitle has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #202

<section class="section has-background-light">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-align-items-center">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-14 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <h6 class="mb-3 has-text-weight-bold is-size-4">Check of access</h6>
              <p class="subtitle mb-0">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #203

<section class="section has-background-light">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <img class="image is-fullwidth" src="cronos-assets/images/scene-running.png" alt="">
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md ml-auto-desktop">
          <h3 class="mb-14 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <h6 class="mb-3 has-text-weight-bold is-size-4">Check of access</h6>
              <p class="subtitle mb-0">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #204

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-align-items-center">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop mx-auto is-relative">
          <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" style="width: 160px; margin-left: -160px; z-index: 1;" src="cronos-assets/elements/green-white-small.svg" alt="">
          <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0" style="width: 160px; margin-right: -80px; z-index: 1;" src="cronos-assets/elements/warning-light-small.svg" alt="">
          <img class="image is-fullwidth is-cover" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-14 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <h6 class="mb-3 has-text-weight-bold is-size-4">Check of access</h6>
              <p class="subtitle mb-0">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #205

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-align-items-center">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-14 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <h6 class="mb-3 has-text-weight-bold is-size-4">Check of access</h6>
              <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="mb-6 is-flex is-align-items-start">
            <span class="mr-4">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #206

<section class="section pb-32-desktop is-relative">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #207

<section class="pb-20 pb-32-desktop is-relative">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #208

<section class="pb-20 pb-32-desktop is-relative">
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #209

<section class="pb-20 pb-32-desktop is-relative has-background-light">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #210

<section class="pb-20 pb-32-desktop is-relative has-background-light">
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #211

<section class="pb-20 pb-32-desktop is-relative has-background-warning-light">
  <div class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0" style="width: 50%; background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
    <img class="is-absolute is-top-0 is-right-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
    <img class="is-absolute is-bottom-0 is-left-0" style="z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
  </div>
  <div class="container px-4">
    <div class="columns is-multiline pt-20">
      <div class="column is-12 is-6-desktop ml-auto">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h3 class="mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h6 class="mb-0 has-text-weight-normal">Change of access</h6>
            </li>
            <li class="mb-6 is-flex is-align-items-center">
              <span class="mr-4 is-inline-flex has-background-light is-justify-content-center is-align-items-center is-rounded" style="width: 48px; height: 48px; border-radius: 50% !important;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #212

<section class="section" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-8 mb-0-desktop">
        <div class="p-8 p-12-desktop has-background-white">
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <h6 class="mt-6 mb-4 has-text-weight-normal is-size-4">Change of access</h6>
          <p class="subtitle mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
          <a class="has-text-weight-bold" href="#">
            <span>Learn More</span>
            <span class="ml-2 is-inline-block">
              <svg width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.84147 4.00001L0.120381 0.825405C-0.0593303 0.615742 -0.0350495 0.300092 0.174613 0.120381C0.384276 -0.0593303 0.699926 -0.0350495 0.879637 0.174613L3.87964 3.67461C4.04013 3.86186 4.04013 4.13816 3.87964 4.3254L0.879637 7.8254C0.699926 8.03507 0.384276 8.05935 0.174613 7.87964C-0.0350495 7.69993 -0.0593303 7.38428 0.120381 7.17461L2.84147 4.00001Z" fill="#006251"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop pl-4-desktop">
        <div class="p-8 p-12-desktop has-background-white">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #213

<section class="section" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <div class="p-8 p-12-desktop has-background-white">
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <h6 class="mt-6 mb-4 is-size-4">Change of access</h6>
          <p class="subtitle mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
          <a class="has-text-weight-bold" href="#">
            <span>Learn More</span>
            <span class="ml-2 is-inline-block">
              <svg width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.84147 4.00001L0.120381 0.825405C-0.0593303 0.615742 -0.0350495 0.300092 0.174613 0.120381C0.384276 -0.0593303 0.699926 -0.0350495 0.879637 0.174613L3.87964 3.67461C4.04013 3.86186 4.04013 4.13816 3.87964 4.3254L0.879637 7.8254C0.699926 8.03507 0.384276 8.05935 0.174613 7.87964C-0.0350495 7.69993 -0.0593303 7.38428 0.120381 7.17461L2.84147 4.00001Z" fill="#006251"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop pl-4-desktop">
        <div class="p-8 p-12-desktop has-background-white">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #214

<section x-data="{ mobileNavOpen: false }" class="bg-orange-50">
    <div class="container mx-auto px-4 bg-orange-50">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Cronos Hero Section with Illustration and Trial CTA

A hero section for the Cronos brand with a navigation bar, a large green serif-style heading, supporting text, and two buttons on the left, paired with a flat illustration of people working with a laptop on the right. The layout is a split-screen with text left and illustration right on a cream background.

Tailwind Component #215

<section x-data="{ mobileNavOpen: false }" class="bg-white">
    <div class="container mx-auto px-4 bg-white">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Cronos Hero Section with Performance Headline and Illustration

A light-themed landing page hero featuring a large dark green heading 'Take care of your performance every day.', supporting copy, two CTA buttons, and a split layout with a flat illustration of two people beside a web interface mockup on a pale yellow circle. A top navigation bar with logo, links, and a yellow trial button sits above the section.

Tailwind Component #216

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="container mx-auto px-4 bg-gray-100">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #217

<section x-data="{ mobileNavOpen: false, activeSlide: 1, slideCount: 3 }" class="bg-orange-50 relative">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #218

<section x-data="{ mobileNavOpen: false, activeSlide: 1, slideCount: 3 }" class="bg-gray-100 relative">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #219

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="pb-60 mb-80 relative bg-green-500">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-5 -px-4 relative">
              <div class="w-auto">
                <div class="flex flex-wrap items-center">
                  <div class="w-auto mr-14">
                    <a href="#">
                      <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
              <div class="absolute left-1/2 transform -translate-x-1/2">
                  <div class="flex flex-wrap items-center">
                    <div class="w-auto hidden lg:block">
                      <ul class="flex items-center">
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                        <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                      </ul>
                    </div>
                  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #220