JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

@php( $term = wp_get_post_terms( $post->ID, 'projects_category', array( 'parent' => 0 ) ) )
@php( $term_number = substr($term[0]->name, -1) )
@php( $project_location = get_field('project_location') )
@php( $project_location_title = get_field('project_location_title') )
@php( $project_location_text = get_field('project_location_text') )



<section class="o-projects-single">
  <div class="o-projects-single__content">
    <h1 class="o-projects-single__title u-color--primary">{!! App::title() !!}</h1>
    @php the_content() @endphp
  </div>
  <div class="o-projects-single__categories u-hide">
      <strong class="o-projects-single__categories-title">Categories</strong>
      <ul class="o-projects-single__categories-list">
        @foreach( wp_get_post_terms( $post->ID, 'projects_category', array( 'parent' => 0 ) ) as $cat )

          <li class="o-projects-single__categories-item">
            <a href="/projects/{{ $cat->slug }}/" style="color: {!! get_field('colour', 'term_' . $cat->term_taxonomy_id) !!};" class="o-projects-single__categories-link">{{ $cat->name }}</a> - 
            @php( $i = 0 )
            @php( $length = count( wp_get_post_terms( $post->ID, 'projects_category', array( 'parent' => $cat->term_taxonomy_id ) ) ) )
            @foreach( wp_get_post_terms( $post->ID, 'projects_category', array( 'parent' => $cat->term_taxonomy_id ) ) as $subcat )
            
              {{ $subcat->name }}@if($i != $length - 1), @endif
              @php( $i++ )
            @endforeach
          </li>
        @endforeach
      </ul>
    </div>
  @include( 'partials.builder')
  <div class="o-projects-single__details">
    @if( get_field('funding_value') )
      <article class="o-projects-single__details-item u-rounded u-bg--orange u-padding--small u-color--blank">
      <strong>Funding value:</strong>
      {{ the_field('funding_value') }}
      </article>    
    @endif
    @if( get_field('total_project_cost') )
      <article...