dcbristol-2019-static/source/_includes/speakers.html.twig

<section id="speakers" class="tw-w-full sm:tw-max-w-5xl tw-mx-auto tw-text-center tw-my-12 md:tw-my-24">
  <div class="tw-px-4">
    <h2 class="tw-text-3xl md:tw-text-4xl tw-font-bold tw-mb-10">The Speakers</h2>

    <div class="text-left sm:tw-px-12">
      <ul class="tw-list-reset tw-flex tw-flex-wrap tw--mx-4 tw--mb-10">
        {% for speaker in speakers %}
          <li class="tw-w-full lg:tw-w-1/2 tw-flex tw-text-left tw-mb-10">
            <a href="{{ speaker.url }}" class="group tw-px-4 tw-flex-1 tw-flex tw-flex-row-reverse tw-justify-center tw-no-underline focus:tw-outline-none tw-py-2">
              <span class="tw-flex-1 tw-flex tw-flex-col tw-justify-center">
                <span class="tw-block tw-font-bold tw-text-xl tw-text-gray-900 group-hocus:tw-underline">{{ speaker.title }}</span>
                <span class="tw-block tw-text-gray-800">
                  {% include 'speaker-role' with { speaker: speaker } %}
                </span>
              </span>

              {% if speaker.image %}
                <span class="tw-w-24 md:tw-w-32 tw-mr-6">
                  <span class="tw-rounded-full tw-overflow-hidden tw-block tw-border-4 tw-border-solid tw-border-purple-500 group-hocus:tw-border-pink-500 tw-transition-border tw-transition-100">
                    <img class="tw-block tw-w-full" src="/images/speakers/{{ speaker.image }}" alt="Photo of {{ speaker.name }}">
                  </span>
                 </span>
              {% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>

    <div class="tw-mt-12 tw-leading-relaxed">
      <p class="tw-text-lg">
        We’re currently in the process of announcing speakers.
        <br class="tw-hidden md:tw-inline">
        Check back soon to see who else has been added or <a class="tw-text-purple-600 hocus:tw-text-purple-700 hocus:tw-no-underline" href="{{ site.twitter.url }}">follow us on Twitter</a>.
      </p>
    </div>
  </div>
</section>