Responsive article preview component usnig Tailwind

Community feedback

• 

  Yacoub AlDweik•2,850

  @YacoubDweikPosted about 1 month ago

  Good job!

  Just give the html over-flow hidden, because you have an overflow in your design right now due to the button of sharing the article.

  I'd suggest that you position that small box in a way that it's gonna be inside the view and not outside it like now, keep it up!

  ** I am talking about screens around ~ 800px || Also for Tailwind, you used the after pseudo element, but I'd suggest you stick to something else, which is this, this is from the Tailwind docs:

  ' It's worth noting that you don't really need ::before and ::after pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element.

  For example, here's the same design from above but using a <span> instead of the ::before pseudo-element, which is a little easier to read and is actually less code'

  example:

  # The normal way:
  
  <blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">
    When you look
    <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">
      <span class="relative text-white dark:text-gray-950">annoyed</span>
    </span>
    all the time, people think that you're busy.
  </blockquote>
  
  # The readable way:
  
  <blockquote class="text-center text-2xl font-semibold text-gray-900 italic">
    When you look
    <span class="relative">
      <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span>
      <span class="relative text-white">annoyed</span>
    </span>
    all the time, people think that you're busy.
  </blockquote>
  

  Keep it up :)

  Marked as helpful

  1

  ---

  

  Yacine Ragueb•370

  @Yaciine19Posted about 1 month ago

  @YacoubDweik Thank you for your feedback, It was really helpful, I've corrected the issues you pointed out, except for the one related to pseudo-elements but I'll keep your advice in my mind for future challenges

  0