JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

Contao News-Template (Latest) with image linked

<div class="layout_latest block<?php echo $this->class; ?>">
<?php if ($this->hasMetaFields): ?>
<p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->date; ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->addImage): ?>
<figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

  <?php if ($this->href): ?><!-- prüft, ob bei dem Bild ein Link eingegeben wurde --> 
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><!-- fügt den ersten Teil des Links ein --> 
<?php else: ?><!-- verlinkt auf die Detailseite --> 
<a href="<?php echo $this->link; ?>" title="<?php echo $this->newsHeadline; ?>"> 
<?php endif; ?> 
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /> 
</a><!-- fügt den zweiten Teil des Links ein -->
  
<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<div class="main-link">
<?php echo $this->text ? $this->linkHeadline : $this->newsHeadline; ?>
</div>
<div class="teaser">
<?php echo $this->teaser; ?> 
</div>
<?php if ($this->text): ?>
<p class="more"><?php echo $this->more; ?></p>
<?php endif; ?>
</div>